当前位置： 首页 > news >正文

记录 vue3 webpack 使用 iframe 遇到的坑

news 2026/3/31 23:49:47

需求

我尝试用Vue3写一个自己的主页，把常用的功能集中到主页中，如下图在这里插入图片描述
后发现一个好玩的东西，js实现的在网页底部出现鱼和波浪，如下图，就像想也放到自己的主页中，搜索后发现可以在Vue中用iframe标签直接引入，遂开始尝试。获取链接如下，有需要可以尝试 https://www.bilibili.com/video/BV1JX4y1g7Sn在这里插入图片描述

坑1

将要引入的html直接像普通组件一样放置
在这里插入图片描述
运行后发现网页变得非常卡顿，元素周围还有不断加深的阴影，如下图在这里插入图片描述
一开始因为是其中的某些js等的原因，注释掉后还是如此。多次调试后，将iframe的width和height改为非100%

<iframe width="80%" height="80%" id="WaveAndFish" name="WaveAndFish" src="./components/WaveAndFish/waveAndFish.html" frameborder="no"></iframe>

后发现变为如下在这里插入图片描述
可见，元素周围不断有阴影加深的原因是页面在不断套娃，之前iframe 的width和height都是100%，导致套娃后都重叠在一起，css中的阴影页不断重叠，同时也使页面变得几乎卡死。看来是iframe的目标html引入不成功，导致一直在引用自身

坑2

不断百度后发现并不能像普通组件一样引入，需要放在静态资源文件夹下
在这里插入图片描述
（上图还没尝试将index.html改名，如果有多个本地html需要引入，建议改名，而不是index.html，防止冲突）
结果在使用Vite运行后成功展现在这里插入图片描述
但使用webpack运行后还是不行。（我的主页本来是使用Vite的，但Vite打包后无法在本地直接打开，需要额外的其他操作，而页面中是没有涉及到接口或其他网络请求，因此不想挂到服务器上，所以改为用webpack）

后发现vue-cli 不同版本下 static文件夹要放置的地方是不同的，遂将static文件夹放到public下在这里插入图片描述
结果还是没用

最终

最后发现引入 iframe 中 src 引用的路径需要是打包后的目标html的路径，npm run build打包后的文件结构如下
在这里插入图片描述
改为打包后的引用路径
在这里插入图片描述
终于成功！
在这里插入图片描述

相关文章：

记录 vue3 webpack 使用 iframe 遇到的坑

需求 我尝试用Vue3写一个自己的主页&#xff0c;把常用的功能集中到主页中&#xff0c;如下图 后发现一个好玩的东西&#xff0c;js实现的在网页底部出现鱼和波浪&#xff0c;如下图&#xff0c;就像想也放到自己的主页中&#xff0c;搜索后发现可以在Vue中用iframe标签直接引…...

编程日记 2023/6/5 18:07:08

华为OD机试真题 Java 实现【去除多余空格】【2023Q1 100分】

一、题目描述 去除文本多余空格，但不去除配对单引号之间的多余空格。给出关键词的起始和结束下标，去除多余空格后刷新关键词的起始和结束下标。 条件约束： 不考虑关键词起始和结束位置为空格的场景；单词的的开始和结束下标保证涵盖一个完整的单词，即一个坐标对开始和结束…...

编程日记 2023/6/5 18:02:07

SAP-MM 条件类型字段解析

01、“定价类型”&#xff1a;定义此条件类型的代码和描述&#xff0c;代码不能重复&#xff0c;描述可更改&#xff0c;根据实际需要&#xff0c;条件类型可定制&#xff1b; 02、“存取顺序”&#xff1a;表示此条件类型在定价时&#xff0c;要到存取顺序号定义的条件表中读…...

编程日记 2023/6/5 17:57:05

C#，码海拾贝（28）——求解“对称正定方程组”的“平方根法”之C#源代码

using System; namespace Zhou.CSharp.Algorithm { /// <summary> /// 求解线性方程组的类 LEquations /// 原作 周长发 /// 改编 深度混淆 /// </summary> public static partial class LEquations { /// <summary> /…...

编程日记 2023/6/5 17:52:04

碳纤维单丝外径测试中的纳米分辨率激光衍射法解决方案

摘要&#xff1a;碳纤维单丝热膨胀系数是碳纤维复合材料设计、生产与可靠性和寿命评估的重要参数&#xff0c;本文针对单丝径向高温热膨胀系数测试这一难题提出了相应的解决方案。解决方案的核心内容是基于激光衍射法和高温辐射加热&#xff0c;并采用衍射轮廓拟合技术以及相应…...

编程日记 2023/6/5 17:47:02

服务（第三十二篇）nginx做缓存服务器

nginx作为缓存服务配置语法 1、proxy_cache_path 配置语法&#xff08;即缓存路径配置语法&#xff09; Syntax&#xff1a;proxy_cache_path path [levelslevels] [use_temp_pathon|off] keys_zonename:size [inactivetime] [max_sizesize] [manager_filesnumber] [manager_s…...

编程日记 2023/6/5 17:42:01

Java 集合、数组、字符串的相互转换（关于list.toArray(new String[0])的源码分析）

在 Java 中&#xff0c;可以通过以下方式实现集合、数组和字符串之间的相互转换。 一、集合和数组的相互转化 ①、将集合转为数组&#xff1a;&#xff08;toArray 方法&#xff09; List<String> list new ArrayList<>(); list.add("apple"); lis…...

编程日记 2023/6/5 17:37:00

Redis的全局命令及相关误区

Redis中所说的数据结构是针对key-value中的value而言的。主要的结构包括String、哈希表、列表、集合等等在redis中存在16个库&#xff0c;涉及到后期的集群搭建只能使用0号库最为方便 查看所有键&#xff08;支持通配符&#xff09; keys * keys S*返回当前数据库中的键总数 …...

编程日记 2023/6/5 17:31:58

C++核心编程—类和对象，类的三大特性——封装、继承、多态

纵有疾风起&#xff0c;人生不言弃。本文篇幅较长&#xff0c;如有错误请不吝赐教&#xff0c;感谢支持。 &#x1f4ac;文章目录 一.类和对象的概念①什么是对象&#xff1f;②抽象和类1.类的基本概念2.类的声明与定义&#xff1a;3.对象的创建与使用 二.类的封装①为什么有封…...

编程日记 2023/6/5 17:26:55

keep-alive 是 Vue 内置的一个组件，被用来缓存组件实例。

文章目录 简介注意点使用 keep-alive 有以下优缺点优点缺点 简介 keep-alive 是 Vue 内置的一个组件&#xff0c;被用来缓存组件实例。 使用 keep-alive 包裹动态组件时&#xff0c;被包裹的组件实例将会被缓存起来&#xff0c;而不会被销毁&#xff0c;直到 keep-alive 组件…...

编程日记 2023/6/5 17:21:53

（八）Spring之IOC控制反转、DI依赖注入介绍和使用（详解）

文章目录 前言SpringSpring IOC 简介BeanIOC 概述IOC 本质理解 Spring IOC 应用IOC xml装配IOC 依赖注入IOC Bean的作用域 IoC 自动装配Bean 的自动装配注解实现自动装配 IoC 使用注解开发模拟实现Spring IoC 前言 “Spring”在不同的上下文中表示不同的事物。它可以用来引用 …...

编程日记 2023/6/5 17:16:52

凸缺陷 convexityDefects

获取凸包&#xff0c;可以参考我的这篇文章&#xff1a; 凸包&#xff08;Convex Hull&#xff09;代码实现案例 获取了凸包之后&#xff0c;可以干什么呢&#xff1f; 凸缺陷凸包与轮廓之间的部分称为凸缺陷。凸缺陷可用来处理手势识别等问题。 通常情况下&#xff0c;使用如…...

编程日记 2023/6/5 17:11:50

c语言编程练习题：7-43 Shuffling Machine

Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techniques are seen as weak, and in order to avoid “inside jobs” where employees collaborate with gamblers by performing inadequate shuffles, many casinos empl…...

编程日记 2023/6/5 17:06:48

ffmpeg enum AVChannel枚举解析

AVChannel枚举是在2022-12-20的提交中添加的&#xff0c;对应的版本号是5.1. 这个提交的描述是"avutil/channel_layout: add AVChannel enum and related functions"。 原型 typedef struct AVChannelCustom {enum AVChannel id;char name[16];void *opaque; } AVCh…...

编程日记 2023/6/5 17:01:47

invest模型教程

详情点击链接&#xff1a;invest模型教程——建议收藏 1.生态系统服务 2.InVEST模型 3.InVEST所需数据&#xff08;分辨率、格式、投影系统等&#xff09;、获取及标准化预处理 4.InVEST运行 5.ArcGIS工具支撑InVEST模型 5.1ArcGIS数据形式与数据格式、数据格式之间的相互转换…...

编程日记 2023/6/5 16:56:46

LinuxShell编程

Shell编程 Shell的概念介绍 命令解释器 Shell是命令解释器(command interpreter)&#xff0c;是Unix操作系统的用户接口&#xff0c;程序从用户接口得到输入信息&#xff0c;shell将用户程序及其输入翻译成操作系统内核&#xff08;kernel&#xff09;能够识别的指令&#x…...

编程日记 2023/6/5 16:51:45

stm32学习笔记-11 SPI通信

11 SPI通信 文章目录 11 SPI通信11.1 SPI通信协议11.2 W25Q64简介11.3 实验&#xff1a;软件SPI读写W25Q6411.4 SPI通信外设11.5 实验&#xff1a;硬件SPI读写W25Q64 注&#xff1a;笔记主要参考B站 江科大自化协 教学视频“ STM32入门教程-2023持续更新中”。 注&#xff1a…...

编程日记 2023/6/5 16:46:44

“微商城”项目（3页面布局）

1.设置标题 设置页面头部标题&#xff0c;方便告诉用户当前显示的是哪一个页面。编辑src\router.js文件&#xff0c;示例代码如下。 routes: [{ path: /, redirect: /home, meta: { title: 首页 } },{ path: /home, component: Home, name: home, meta: { title: 首页 } } ] …...

编程日记 2023/6/5 16:41:43

Java 八股文 - MySQL

MySQL 1. MySQL 有几种锁&#xff1f; ​ 三种锁的特点 表级锁&#xff1a;开销小&#xff0c;加锁快&#xff1b;不会出现死锁&#xff1b;锁定颗粒度大&#xff0c;发生锁冲突的概率最高&#xff0c;并发度最低。行级锁&#xff1a;开销大&#xff0c;加锁慢&#xff1b;会…...

编程日记 2023/6/5 16:36:41

周赛347（模拟、思维题、动态规划+优化）

文章目录 周赛347[2710. 移除字符串中的尾随零](https://leetcode.cn/problems/remove-trailing-zeros-from-a-string/)模拟 [2711. 对角线上不同值的数量差](https://leetcode.cn/problems/difference-of-number-of-distinct-values-on-diagonals/)模拟 [2712. 使所有字符相等…...

编程日记 2023/6/5 16:31:39

RevokeMsgPatcher 2.1：实用高效的微信QQ防撤回完整解决方案

RevokeMsgPatcher 2.1&#xff1a;实用高效的微信QQ防撤回完整解决方案 【免费下载链接】RevokeMsgPatcher :trollface: A hex editor for WeChat/QQ/TIM - PC版微信/QQ/TIM防撤回补丁&#xff08;我已经看到了&#xff0c;撤回也没用了&#xff09; 项目地址: https://gitco…...

编程新知 2026/3/31 21:26:59

小红书内容采集效率革命：XHS-Downloader全方位解决方案

小红书内容采集效率革命&#xff1a;XHS-Downloader全方位解决方案 【免费下载链接】XHS-Downloader 小红书&#xff08;XiaoHongShu、RedNote&#xff09;链接提取/作品采集工具&#xff1a;提取账号发布、收藏、点赞、专辑作品链接&#xff1b;提取搜索结果作品、用户链接&am…...

编程新知 2026/3/31 21:08:49

效率提升：用快马AI一键生成医院预约系统的核心排班管理代码

医院预约系统开发笔记&#xff1a;如何用AI快速搞定排班管理模块 最近在开发一个医院预约系统&#xff0c;发现排班管理模块特别费时间。传统的开发方式需要手动编写大量重复性代码&#xff0c;从数据库设计到API接口&#xff0c;再到各种业务逻辑校验&#xff0c;一个完整的排…...

编程新知 2026/3/31 20:52:29

OLAP] DuckDB : 开源免费的、面向嵌入式场景、列式存储的分析型数据库

0 序 DuckDB 是近期非常火的一款 AP 数据库&#xff0c;其独特的定位很有趣。甚至有数据库产品考虑将其纳入进来&#xff0c;作为分析能力的扩展。 考虑到项目中一个数据处理场景&#xff0c;就此调研一二。 DuckDB 的爆火&#xff0c;也给所有盲目追逐“大数据”的技术人敲响…...

编程新知 2026/3/31 20:19:49

微信小程序支付V3接口在ThinkPHP6中的封装实践：如何设计一个可复用的支付服务类？

微信小程序支付V3接口在ThinkPHP6中的高复用封装实践 微信支付作为小程序生态中最核心的商业化能力&#xff0c;其技术实现的质量直接影响着用户体验和系统稳定性。本文将分享如何在ThinkPHP6框架下&#xff0c;从零构建一个符合SOLID原则的支付服务类&#xff0c;实现一次封装…...

编程新知 2026/3/31 19:51:30

手机号查QQ号：解密腾讯通信协议的Python实战工具

手机号查QQ号&#xff1a;解密腾讯通信协议的Python实战工具 【免费下载链接】phone2qq 项目地址: https://gitcode.com/gh_mirrors/ph/phone2qq 你是否曾经遇到过这样的情况&#xff1a;手头有一个手机号&#xff0c;想知道它是否关联了QQ账号&#xff1f;或者作为开发…...

编程新知 2026/3/31 16:36:19

Phi-3-mini-4k-instruct-gguf多场景落地：客服话术优化、会议纪要提炼、周报生成实战

Phi-3-mini-4k-instruct-gguf多场景落地&#xff1a;客服话术优化、会议纪要提炼、周报生成实战 1. 轻量级文本生成利器介绍 Phi-3-mini-4k-instruct-gguf是微软推出的轻量级文本生成模型&#xff0c;特别适合处理日常办公场景中的文本任务。这个模型体积小巧但能力出众&…...

编程新知 2026/3/31 16:07:45

手把手教你学Simulink——基于Simulink的模型预测控制（MPC）PFC整流器快速动态响应

目录 手把手教你学Simulink ——基于Simulink的模型预测控制（MPC）PFC整流器快速动态响应 一、问题背景 二、系统建模与控制目标 1. 单相 Boost PFC 拓扑 2. 动态方程（αβ 静止坐标系） 3. 控制目标 三、有限控制集 MPC（FCS-MPC）设计 1. 预测模型（离散化） 2. 代…...

编程新知 2026/3/31 15:57:36

3分钟解锁暗黑破坏神2完整体验：PlugY插件终极指南 [特殊字符]

3分钟解锁暗黑破坏神2完整体验&#xff1a;PlugY插件终极指南 &#x1f3ae; 【免费下载链接】PlugY PlugY, The Survival Kit - Plug-in for Diablo II Lord of Destruction 项目地址: https://gitcode.com/gh_mirrors/pl/PlugY 还在为暗黑破坏神2单机模式的种种限制而…...

编程新知 2026/3/31 15:43:29

从手动压枪到智能辅助：探索罗技鼠标宏在PUBG中的进化之路

从手动压枪到智能辅助&#xff1a;探索罗技鼠标宏在PUBG中的进化之路 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 当你在绝地求生的激烈对枪中…...

编程新知 2026/3/31 15:22:40