vue项目中内嵌iframe,打包上线时候iframe地址如何写?

news2024/9/29 11:38:29

vue项目中内嵌iframe,打包上线时候iframe地址如何写

  • 一、项目结构
    • 1.内嵌的iframe文件位置
    • 2.打包后的iframe的位置
  • 二、代码

前提描述,项目是用webpack打包的,内嵌一个完整的js小组件

一、项目结构

1.内嵌的iframe文件位置

在这里插入图片描述

2.打包后的iframe的位置

没有配置对iframePhone文件进行打包,打包之前的iframePhone和之前文件结果一样
在这里插入图片描述

二、代码

  <!-- 嵌套HTML5页面示例 -->
     //1.想对定位只能适用于本地调试
         <!-- <iframe
             src="../../../../../static/edb/html/login.html"
             style="width: 100%; height: 500px"
         ></iframe> -->
      //2.打包后的相对定位适用于本地和生产调试
         <iframe
             src="/static/iframePhone/html/login.html"
             style="width: 100%; height: 500px"
         ></iframe>
       //3.本机完整地址适用于本地调试
         <!-- <iframe
             src="http://localhost:8080/static/edb/html/login.html"
             style="width: 100%; height: 500px"
         ></iframe> -->
       //4.生产完整地址适用于生产调试
         <!-- <iframe
             src="https://生产地址/static/edb/html/login.html"
             style="width: 100%; height: 500px"
         ></iframe> -->

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1129952.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Centos8: 安装python2, 并设置默认版本

文章目录 原本centos上已经有python3.6了&#xff0c;因为要运行旧代码&#xff0c;需要安装python2版本。 #在CentOS 8上安装Python 2 sudo dnf install python2#设置默认Python版本 python2 sudo alternatives --set python /usr/bin/python2#设置默认Python版本 python3 sud…

互联网Java工程师面试题·Spring篇·第三弹

目录 ​编辑 4、注解 4.1、什么是基于注解的容器配置 4.2、如何在 spring 中启动注解装配&#xff1f; 4.3、Component, Controller, Repository,Service 有何区别&#xff1f; 4.4、Required 注解有什么用&#xff1f; 4.5、Autowired 注解有什么用&#xff1f; 4.6、…

第十三章 枚举类型与泛型总结

13.1 枚举类型 枚举类型是一种特殊的数据类型&#xff0c;它允许一个变量只能取预先定义好的一组离散值中的一个。在许多编程语言中&#xff0c;枚举类型通常用于表示具有一定范围内固定取值的情况&#xff0c;例如星期几、月份等。 13.1.1使用枚举类型设置常量 在Java中&am…

Ps:消除锯齿与修边

由于像素是方形的&#xff0c;在创建椭圆等带弧形的选区时容易在选区边缘产生锯齿。 Ps 中支持“消除锯齿” Anti-alias的选区工具有&#xff1a; 椭圆选框工具、套索工具、多边形套索工具、磁性套索工具、魔棒工具等。 勾选“消除锯齿”后&#xff0c;Ps 会在选区边界两侧约 1…

JoySSL:免费SSL证书的新选择

阿里云曾经提供了一年期的免费SSL证书&#xff0c;然而从下个月14号开始&#xff0c;阿里云不再提供免费的一年期SSL证书&#xff0c;而是改为68元/张/年&#xff0c;这对于很多网站建设公司需要大量基本证书来说&#xff0c;无疑是一种负担&#xff0c;又不知道该去哪里获取可…

vue首页多模块布局(标题布局)

<template><div class"box"><div class"content"><div class"box1" style"background-color: rgb(245,23,156)">第一个</div><div class"box2" style"background-color: rgb(12,233,…

关于nacos的配置获取失败及服务发现问题的排坑记录

nacos配置更新未能获取到导致启动报错 排查思路&#xff1a; 1、是否添加了nacos的启动pom依赖 参考&#xff1a; <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId><…

Redis数据类型——hash类型的应用场景

1.hash类型应用场景 redis中覆盖或者没成功都返回0 hsetnx 返回0表示不能覆盖。 2.业务场景

以太网链路聚合与交换机堆叠,集群

目录 以太网链路聚合 一.链路聚合的基本概念 二.链路聚合的配置 1.手工模式 2.LACP模式 系统优先级 接口优先级 最大活动接口数 活动链路选举 负载分担 负载分担模式 三.典型使用场景 交换机之间 交换机和服务器之间 交换机和堆叠系统 防火墙双机热备心跳线 四…

debian、ubuntu打包deb包工具,图形界面deb打包工具mkdeb

debian、ubuntu打包deb包工具&#xff0c;图形界面deb打包工具mkdeb&#xff0c;目前版本1.0 下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1QX6jXNMYRybI9Cx-1N_1xw?pwd8888 md5&#xff1a; b6c6658408226a8d1a92a7cf93834e66 mkdeb_1.0-1_all.deb

修炼k8s+flink+hdfs+dlink(六:学习namespace,service)

一&#xff1a;什么是namespace&#xff1f; 你可以认为namespaces是你kubernetes集群中的虚拟化集群。在一个Kubernetes集群中可以拥有多个命名空间&#xff0c;它们在逻辑上彼此隔离。 他们可以为您和您的团队提供组织&#xff0c;安全甚至性能方面的帮助&#xff01; 二&a…

ubuntu tools

1 cloc calculate lines of your code sudo apt-get install cloccloc ./file

nodejs+vue备忘记账系统-计算机毕业设计

本文首先介绍了备忘记账系统管理技术的发展背景与发展现状&#xff0c;然后遵循软件常规开发流程&#xff0c;首先针对系统选取适用的语言和开发平台&#xff0c;目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章…

Windows电脑如何录制电脑桌面?

如果你使用的电脑是Windows系统&#xff0c;那你是不是想知道如何在Windows电脑上录制电脑桌面&#xff1f; 本文以win10为例&#xff0c;好消息是&#xff0c;Windows 10电脑自带录屏工具&#xff0c;你可以直接使用此录屏工具轻松录制视频&#xff0c;而无需下载其他第三方软…

题目 1009: [编程入门]数字的处理与判断(python详解)——练气二层后期

✨博主&#xff1a;命运之光 &#x1f984;专栏&#xff1a;算法修炼之练气篇&#xff08;C\C版&#xff09; &#x1f353;专栏&#xff1a;算法修炼之筑基篇&#xff08;C\C版&#xff09; &#x1f352;专栏&#xff1a;算法修炼之练气篇&#xff08;Python版&#xff09; ✨…

批量合并视频、音频、文案,让你的视频更加丰富多彩

你是否曾经有过批量合并视频的需求&#xff0c;但是却苦于不知道如何下手&#xff1f;今天&#xff0c;我将为你介绍一个简单易行的方法&#xff0c;只需两个步骤&#xff0c;让你轻松实现批量合并视频。 第一步&#xff1a;下载并打开固乔智剪软件 首先&#xff0c;你需要下载…

【AI视野·今日Robot 机器人论文速览 第五十七期】Wed, 18 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Wed, 18 Oct 2023 Totally 17 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Underwater and Surface Aquatic Locomotion of Soft Biomimetic Robot Based on Bending Rolled Dielectric Elastomer Actua…

基于定容积法标准容器容积标定中的电动针阀自动化解决方案

摘要&#xff1a;在目前的六氟化硫气体精密计量中普遍采用重量法和定容法两种技术&#xff0c;本文分析了重量法中存在的问题以及定容法的优势&#xff0c;同时也指出定容法在实际应用中还存在自动化水平较低的问题。为了提高定容法精密计量过程中的自动化水平&#xff0c;本文…

Qt之实现支持多选的QCombobox

一.效果 1.点击下拉列表的复选框区域 2.点击下拉列表的非复选框区域 二.实现 QHCustomComboBox.h #ifndef QHCUSTOMCOMBOBOX_H #define QHCUSTOMCOMBOBOX_H#include <QLineEdit> #include <QListWidget> #include <QCheckBox> #include <QComboBox>…

渗透攻击漏洞之——原型链污染

背景 2019年初&#xff0c;Snyk的安全研究人员披露了流行的JavaScript库Lodash中一个严重漏洞的详细信息&#xff0c;该漏洞使黑客能够攻击多个Web应用程序&#xff0c;这个安全漏洞就是一个“原型污染漏洞”&#xff08;JavaScript Prototype Pollution&#xff09;&#xff…