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

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.mfbz.cn/a/105036.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Pytorch代码入门学习之分类任务(三):定义损失函数与优化器

一、定义损失函数 1.1 代码 criterion nn.CrossEntropyLoss() 1.2 损失函数简介 神经网络的学习通过某个指标表示目前的状态&#xff0c;然后以这个指标为基准&#xff0c;寻找最优的权重参数。神经网络以某个指标为线索寻找最优权重参数&#xff0c;该指标称为损失函数&am…

【开发篇】一、处理函数:定时器与定时服务

文章目录 1、基本处理函数2、定时器和定时服务3、KeyedProcessFunction下演示定时器4、process重获取当前watermark 前面API篇完结&#xff0c;对数据的转换、聚合、窗口等&#xff0c;都是基于DataStream的&#xff0c;称DataStreamAPI&#xff0c;如图&#xff1a; 在Flink…

宏电5G RedCap工业智能网关获首个中国移动5G物联网开放实验室5G及轻量化产品能力认证

10月21日&#xff0c;2023世界物联网博览会——中国移动物联网开发者大会暨物联网产业论坛在无锡圆满举行。宏电股份参与中国移动5G物联网开放实验室5G及轻量化产品能力认证成果授牌仪式&#xff0c;并获得认证证书。 此次认证主要对产品功能、产品性能、RedCap网络兼容性进行测…

DJYROS产品:基于DJYOS的国产自主割草机器人解决方案

基于都江堰泛计算操作系统的国产自主机器人操作系统即将发布…… 1、都江堰机器人操作系统命名&#xff1a;DJYROS 2、机器人算法&#xff1a;联合行业自主机器人厂家&#xff0c;构建机器人算法库。 3、机器人芯片&#xff1a;联合行业机器人AI芯片公司&#xff0c;构建专用…

Windows Server 2019 搭建FTP站点

目录 1.添加IIS及FTP服务角色 2.创建FTP账户&#xff08;用户名和密码&#xff09;和组 3.设置共享文件夹的权限 4.添加及设置FTP站点 5.配置FTP防火墙支持 6.配置安全组策略 7.客户端测试 踩过的坑说明&#xff1a; 1.添加IIS及FTP服务角色 a.选择【开始】→【服务器…

中文编程开发语言工具编程实际案例:台球棋牌混合计时计费软件使用的编程构件说明

中文编程开发语言工具编程实际案例&#xff1a;台球棋牌混合计时计费软件使用的编程构件说明 上图说明&#xff1a;该软件可以用于桌球和棋牌同时计时计费&#xff0c;在没有开台的时候&#xff0c;图片是处于等待状态&#xff0c;这使用编程工具中的固定图像构件&#xff0c;在…

leetcode做题笔记203. 移除链表元素

给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5]示例 2&#xff1a; 输入&#xff1a…

css 两栏布局的实现

目录 前言 1. 浮动布局 用法 代码示例 理解 2. Flex布局 用法 代码示例 理解 3. Grid布局 用法 代码示例 理解 高质量的设计 前言 两栏布局是一种常见的网页设计模式&#xff0c;它将页面分为两个主要区域&#xff1a;主内容区域和侧边栏。这种布局方式不仅能够提…

睿趣科技:抖音小店申请流程

随着移动互联网的发展&#xff0c;越来越多的人开始尝试通过开设网店来创业。抖音作为国内最受欢迎的短视频平台之一&#xff0c;也推出了自己的电商功能——抖音小店。那么&#xff0c;如何申请抖音小店呢?下面就为大家详细介绍一下抖音小店的申请流程。 首先&#xff0c;打开…

Vue3:将表格数据下载为excel文件

需求 将表格数据或者其他形式的数据下载为excel文件 技术栈 Vue3、ElementPlus、 实现 1、安装相关的库 下载xlsx 和 file-saver 库 npm install -S file-saver npm install -S xlsx引入XLSX库和FileSaver库 import XLSX from xlsx; import FileSaver from file-saver;…

linux音频-IIS音频接口

IIS 总线 IIS(Integrate Interface of Sound)即集成音频接口&#xff0c;在上个世纪 80 年代首先被 Philips 公司用于消费产品的音频设备&#xff0c; I2S规范 I2S总线只能用来处理audio data&#xff0c;而别的信号比如控制信号&#xff0c;编码信号则交给别的模块处理。为了…

iOS调试技巧——使用Python 自定义LLDB

一、类介绍 在使用Python 自定义LLDB之前&#xff0c;先了解一下LLDB的一些类型 SBTarget 正在被调试的程序SBProcess 和程序关联的具体的进程SBThread 执行的线程SBFrame 和线程关联的一个栈帧SBVariable 变量&#xff0c;寄存器或是一个表达式 一般情况下&#xff0c;我们…

【从0到1设计一个网关】自研网关的架构搭建

文章目录 项目骨架搭建领域模型与DDD核心上下文模型封装静态配置的加载组件生命周期源码地址: 源码地址 项目骨架搭建 这里我使用的IDE工具是IDEA。 从上文中我们了解到,我们的项目大概有五个模块,Client,Common,Register Center,Config Center,Core这五个模块。 下面…

Linux进程终止

文章目录 进程退出场景进程退出码strerrorerrno浅谈进程异常exit && _exit 进程退出场景 代码运行完毕&#xff0c;结果正确代码运行完毕&#xff0c;结果不正确代码异常 进程退出码 我们写的C/C的代码&#xff0c;main函数每次都需要返回0&#xff0c;而这个return…

比Nginx测试桩更方便,ShenYu网关的Mock插件

有时候为了方便测试&#xff0c;我们需要模拟 HTTP 外部接口的返回结果。通常情况下&#xff0c;我们可以使用 Nginx 测试桩来实现这个目的。然而&#xff0c;Nginx 的使用门槛较高&#xff0c;可能对一些初级开发和测试人员来说有一定的难度。相比之下&#xff0c;Apache Shen…

深度学习_6_实战_点集最优直线解_代码解析

问题描述&#xff1a; 上述题目的意思为&#xff0c;人工造出一些数据点&#xff0c;对我们的模型y Xw b ∈进行训练&#xff0c;其中标准模型如下&#xff1a; 其中W和X都为张量&#xff0c;我们训练的模型越接近题目给出的标准模型越好 训练过程如下&#xff1a; 人造数…

SCSS动态生成类

前言 在项目开发中&#xff0c;为了方便样式的复用和规范化&#xff0c;通常都会统一一些公共的样式类&#xff0c;如果用传统的css来写就会显得很臃肿。 最近看了看接手的项目的公共css文件&#xff0c;发现很多重复的样式声明&#xff0c;还有全局的样式使用不统一问题。 例…

80.每日一练:移除元素(力扣)

问题描述 代码解决以及思想 解法一 class Solution { public:int removeElement(vector<int>& nums, int val) {int len 0; // 初始化一个用于记录非目标值个数的变量// 创建一个迭代器 it&#xff0c;指向 nums 的开头vector<int>::iterator it nums.beg…

Ubuntu22.04 交叉编译阿里oss c-sdk

一、交叉编译openssl Ubuntu20.04 交叉编译openssl 1.0.1f_编译前去除 makefile 中所有的"-m64"字段_qq76211822的博客-CSDN博客文章浏览阅读319次。Ubuntu20.04 交叉编译openssl_编译前去除 makefile 中所有的"-m64"字段https://blog.csdn.net/sz7621182…

【码银送书第九期】《ChatGPT 驱动软件开发:AI 在软件研发全流程中的革新与实践》

计算机技术的发展和互联网的普及&#xff0c;使信息处理和传输变得更加高效&#xff0c;极大地改变了金融、商业、教育、娱乐等领域的运作方式。数据分析、人工智能和云计算等新兴技术&#xff0c;也在不断地影响和改变着各个行业。 如今&#xff0c;我们正在见证人工智能技术的…
最新文章