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

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

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

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

一、项目结构

1.内嵌的iframe文件位置

在这里插入图片描述

2.打包后的iframe的位置

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

二、代码

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

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

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

相关文章

图论05-【无权无向】-图的广度优先BFS遍历-路径问题/检测环/二分图/最短路径问题

文章目录 1. 代码仓库2. 单源路径2.1 思路2.2 主要代码 3. 所有点对路径3.1 思路3.2 主要代码 4. 联通分量5. 环检测5.1 思路5.2 主要代码 6. 二分图检测6.1 思路6.2 主要代码6.2.1 遍历每个联通分量6.2.2 判断相邻两点的颜色是否一致 7. 最短路径问题7.1 思路7.2 代码 1. 代码…

听GPT 讲Rust源代码--library/std(2)

File: rust/library/std/src/sys_common/wtf8.rs 在Rust源代码中&#xff0c;rust/library/std/src/sys_common/wtf8.rs这个文件的作用是实现了UTF-8编码和宽字符编码之间的转换&#xff0c;以及提供了一些处理和操作UTF-8编码的工具函数。 下面对这几个结构体进行一一介绍&…

wkhtmltoimage/wkhtmltopdf 使用实践

1. 介绍 wkhtmltopdf/wkhtmltoimage 用于将简单的html页面转换为pdf或图片&#xff1b; 2.安装 downloads 2.1. mac os 下载64-bit 版本然后按照指示安装, 遇到 untrust developers 时&#xff0c;需要在 Settings -> Privacy 处信任下该安装包。 2.2. debian # 可用…

【完美世界】被骂国漫之耻,石昊人设战力全崩,现在真成恋爱世界了

【侵权联系删除】【文/郑尔巴金】 深度爆料&#xff0c;《完美世界》动漫第135集预告片已经更新了&#xff0c;但是网友们对此却是一脸槽点。从预告中可以看出&#xff0c;石昊在和战王战天歌的大战中被打成重伤&#xff0c;最后云曦也被战天歌抓住。在云曦面临生死危机的时候…

SRAM与DRAM的区别

目录 SRAM 特点 应用场景 DRAM 特点 应用场景 SRAM和DRAM的区别 SRAM SRAM&#xff08;静态随机存取存储器&#xff09;是一种用于存储和检索数据的类型的计算机内存。SRAM的存储单元通过触发器&#xff08;flip-flop&#xff09;实现&#xff0c;它们可以保持数据的状态…

linux-文件系统

目录 一、文件系统 1.分区 2.文件系统分类 3.文件系统创建工具 4.查看文件系统的属性 5.挂载 6.buffer和cache 一、文件系统 1.分区 1-4个主分区 第五个序号开始&#xff0c;是逻辑分区 2.文件系统分类 vfs文件系统 ------------- virtualenv file System&#xff0…

Tensorboard安装及简单使用

Tensorboard 1. tensorboard 简单介绍2. 安装必备环境3. Tensorboard安装4. 可视化命令 1. tensorboard 简单介绍 TensorBoard是一个可视化的模块&#xff0c;该模块功能强大&#xff0c;可用于深度学习网络模型训练查看模型结构和训练效果&#xff08;预测结果、网络模型结构…

Uniapp 酷炫钱包页面模板 直接引用

使用教程 直接引用Vue页面 即可 <template><view><TCqianbao></TCqianbao></view> </template> <script>import TCqianbao from /uni_modules/TC-qianbao/pages/index.vueexport default {components:{TCqianbao},} </script&…

UVM 验证方法学之interface学习系列文章(八)《interface不小心引入X态问题》

前面的文章学习,想必大家都对interface 有了深入了解。大家可不要骄傲哦,俗话说:小心驶得万年船。今天,再给大家介绍一个工作中,不是经常遇到,但是一旦遇到,会让你纠结很久的事情。 前面文章提到,随着验证复杂度的不断增加,interface 的bind 的操作,是必不可少的用法…

asp.net网上商城系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio协同过滤设计

一、源码特点 asp.net网上商城系统是一套完善的web设计管理系统系统采用协同过滤算法进行商品推荐&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库 为sqlserver2008&#xff0c;使用c#语言开发 ASP…

RK356X/RK3588构建Ubuntu20.04根文件系统

文章目录 前言一、官网下载ubuntu-base二、挂载并构建文件系统2.1、配置构建文件系统环境2.2、编写挂载脚本mount.sh并安装相关工具2.3、轻量级的桌面环境 lubuntu-desktop2.4、卸载一些不必要的软件2.5、添加用户2.6 、允许root用户登录桌面2.7、串口自动登录2.8、添加分区释放…

阿里云对象存储OSS文件无法预览,Bucket设置了Referer

您发起的请求头中没有Referer字段或Referer字段为空&#xff0c;与请求Bucket设置的防盗链策略不相符。 解决方案 您可以选择以下任意方案解决该问题。 在请求中增加Referer请求头。 GET /test.txt HTTP/1.1 Date: Tue, 20 Dec 2022 08:48:18 GMT Host: BucketName.oss-examp…

springboot actuator 常用接口

概述 微服务作为一项在云中部署应用和服务的新技术是当下比较热门话题&#xff0c;而微服务的特点决定了功能模块的部署是分布式的&#xff0c;运行在不同的机器上相互通过服务调用进行交互&#xff0c;业务流会经过多个微服务的处理和传递&#xff0c;在这种框架下&#xff0…

【go-zero】go-zero 脚手架 simple-admin 开篇:安装 了解 goctls

一、什么是goctls 1、github地址 官方链接: goctls链接:https://github.com/suyuan32/goctls 官方视频教程: SimpleAdmin环境配置-工具安装 2、goctls说明 二、安装 goctls 1、使用go install 推荐使用 go install 进行安装 我个人使用的是mac的zsh ,之前是git clone的源…

Chapter1:C++概述

此专栏为移动机器人知识体系的 C {\rm C} C基础&#xff0c;基于《深入浅出 C {\rm C} C》(马晓锐)的笔记&#xff0c; g i t e e {\rm gitee} gitee链接: 移动机器人知识体系. 1.C概述 1.1 C概述 计算机系统分为硬件系统和软件系统。 硬件系统&#xff1a;指组成计算机的电子…

VMware Ubuntu 关闭自动更新

##1. VMware 17Pro&#xff0c;ubuntu16.04 关闭自动更新 1.1 编辑–》 首选项–》更新–》启动时检查产品更新 2. 这里关了还不够&#xff0c;第二天打开的时候还是提醒系统更新&#xff0c;需要关闭另外的地方 3. 关闭更新检查&#xff0c;默认的是隔天检查一次&#xff0c;…

栈(Stack)的概念+MyStack的实现+栈的应用

文章目录 栈&#xff08;Stack&#xff09;一、 栈的概念1.栈的方法2.源码分析 二、MyStack的实现1.MyStack的成员变量2.push方法3.isEmpty方法和pop方法4.peek方法 三、栈的应用1.将递归转化为循环1.调用递归打印2.通过栈逆序打印链表 栈&#xff08;Stack&#xff09; 一、 栈…

vue阻止浏览器刷新,达到业务逻辑的实现,在Ts+vue中使用组件内路由守卫

vue阻止浏览器刷新&#xff0c;达到业务逻辑的实现 有类似的需求&#xff0c;页面存在编辑框或者文本输入或者其他&#xff0c;当用户进入编辑状态时&#xff0c;如果没有点击保存就离开页面&#xff0c;需弹窗提示。chrome浏览器手动刷新时如果处于编辑状态也弹出相应的阻止功…

13.4 DirectX内部劫持绘制

相对于外部绘图技术的不稳定性&#xff0c;内部绘制则显得更加流程与稳定&#xff0c;在Dx9环境中&#xff0c;函数EndScene是在绘制3D场景后&#xff0c;用于完成将最终的图像渲染到屏幕的一系列操作的函数。它会将缓冲区中的图像清空&#xff0c;设置视口和其他渲染状态&…

clip-path图片裁剪

CSS clip-path 属性 属性定义及使用说明 clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示&#xff0c;区域外的隐藏。可以指定一些特定形状。 CSS3 剪贴路径&#xff08;Clip-path&#xff09;在线生成器 | 踏得网 语法&#xff1a;clip: clip-source|basi…