vue 嵌套 HTML文件（iframe）

听闻余生640

已于 2023-02-09 16:43:02 修改

阅读量1.7k

点赞数 1

文章标签：前端 Powered by 金山文档

于 2023-02-09 16:41:47 首次发布

本文链接：https://blog.csdn.net/qq_55707700/article/details/128955651

版权

文章讲述了在Vue项目里遇到iframe加载public/static下文件返回404的错误。问题的原因是打包后public为根目录，不需要额外添加public路径。解决方案是直接以/static/引用文件，如：<iframesrc=/static/MjMwMjA5MjU2OTgxNDkw.html...></iframe>。

摘要由CSDN通过智能技术生成

一、问题

把要引入的文件MjMwMjA5MjU2OTgxNDkw.html放在了public的static下面,在iframe标签的src里面引入该文件，但是页面上是一直显示404

二、源代码

三、解决办法

1.原因：在vue里面打包好的项目就以public为根目录的,所以src直接引用即可，不能再加public。

2.修改后的代码（其余代码不变）,这样就完成了

 <iframe src="/static/MjMwMjA5MjU2OTgxNDkw.html" name="iframeDemo"   frameborder="0" style="width: 100%;height:700px;"></iframe>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

听闻余生640

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue中动态引入html文件,并且传入参数

weixin_41314700的博客

03-23

1688

vue项目中引入一些原有功能的html, 支持传递参数

Vue中插入HTML代码的方法

12-03

我们需要吧<p>Hello World</p>插入到<p>My name is Pjee</p>应该如何做？一、使用v-html v-html:更新元素的 innerHTML const text = `<p>Hello World</>` <p> My name is Pjee <p v-html='text'></p> </p> 注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。二、渲染函数渲染函数：这是通过对VNode（虚拟DOM）的操作来生成 text()

3 条评论您还未登录，请先登录后发表或查看评论

html页面引入vue,element Plus 构建页面

最新发布

wenwen123456_的博客

08-26

163

项目需求：在pc端操作系统添加html页面进行手动执行一些操作，要求地址栏输入文件名直接跳转到页面，环境变量要和系统测试，生产保持一致。是 ESM 模块的特性。最简单的方法就是让后端根据请求接口的地址做配置转发，前端就无需改动了。环境变量要和系统测试，生产保持一致？————因为html页面是不能直接使用。上述方法在使用el-table表格的时候使用自闭合标签会有以下问题。1.使用cdn引入要用的文件。2.创建app，挂载使用。解决方案使用双标签。

Vue中嵌入原生HTML页面

weixin_38982591的博客

01-30

3331

但是vue目前暂时没找到有类似功能相关文档，所以我采用iframe嵌套的方式。在mounted生命周期中去绑定具体Iframe的页面。在mounted中加监听事件，并配上处理监听对象的方法。在data中定义一个iframe绑定的页面的对象。在method中定义方法，用于处理监听的事件。在html中接收vue端传过来的值。发送信息到iframe页面。html页面中的代码。

vue项目通过＜iframe＞嵌套静态html项目，并实现数据交互

qq_16785561的博客

11-21

1713

记录一下新项目集成老项目过程中产生的问题，需要vue项目实现引用HTML，并且实现vue页面可以传递数据到HTML页面，HTML页面也可以反向传递数据给vue页面。1、父页面（vue）传给子页面（html）2、子页面（html）传给父页面（vue）

【前端07】vue中直接嵌入html页面

Noyade的博客

05-23

709

vue页面中引入ifraf昂me 标签，一定要注意html页面放的位置！一定要放在public里面，不然看不到。

Vue中嵌入原生HTML页面的方法

weixin_59525879的博客

02-04

3323

创建一个单文件组件（.vue文件）并将原生HTML代码嵌入其中。在你的Vue项目中，创建一个新的.vue文件，例如。这样，当你运行你的Vue应用时，你就可以在你的页面上看到嵌入的原生HTML代码。在该文件中，使用template标签来包裹你的原生HTML代码。

在vue中实现嵌套页面(iframe)

11-19

vue中嵌套iframe,将要嵌套的文件放在static下面。... <iframe src=”../../static/plusPro.html...补充知识：关于VUE嵌套iframe的一系列问题此文是建立在vue-cli之上，当然单写也可以，下文会涉及一些关于cli的知识，

vue3嵌套iframe及相互通迅

05-22

vue3嵌套iframe及相互通迅，包含vue嵌套iframe的通用组件，vue 与 iframe 相互通讯的公共方法；同时包含apache部署vue的配置文件，以及vue访问apache代理的静态html页面。实现通过vue路由加载第三方服务页面，实时...

div嵌套html不用iframe

09-28

在网页设计和开发中，有时候我们需要在不使用`...通过以上步骤和知识点，我们可以在不使用`iframe`的情况下，利用`div`和jQuery实现页面内容的嵌套，这不仅可以提高网页性能，还能更好地控制和定制页面的显示效果。

前端开发：Vue中嵌套标签iframe的使用

软贱开发攻城狮

10-20

5168

前言在前端开发过程中，往原有页面中嵌入新的页面的需求也是比较常见的需求操作，尤其是在比较复杂的必须要用嵌套的场景下。前端中使用嵌套的时候，需要用到的就是iframe标签，通过该标签可以规定一个内联框架，然后放入需要嵌套的新页面即可。本篇博文来分享一下关于iframe的使用方法，尤其是对于初级开发者来说尤为重要。 iframe 1、定义和使用 <iframe> 标签规定一个内联框架，一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 2、使用说明（1）可以把需要的文本放

VUE页面中加载外部HTML的示例代码

08-29

本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Vue中嵌入html页面并相互通信

qq_43842093的博客

09-21

9920

可以通过将src中修改需要展示的页面地址，这样做的好处是vue与iframe之间不需要通信，与后端的通信可以直接通过js发请求与后端进行交互。

Vue嵌入本地html页面

weixin_43698795的博客

05-13

1万+

问题描述：向vue项目中嵌入html页面#嵌入代码失败原因：代码结构不同，需要放到指定位置解决：把本地html、css\js\img都放到与src同级的public\static下 #嵌入代码 <template> <div style="width: 100%">  <div> <iframe src="/static/demo01.html" scrolling=

vue内嵌html

zhxdsg的博客

01-12

1855

httpGetData () { // getUserInfo().then(res => { // if (isSuccess(res)) { // this.userAccount=res.body.userAccount; // window.location.href='http://ssc-app.telecomjs.com/ssc-annualReport/annualReport.html?username='+this.

如何在vue项目中引入html页面

热门推荐

qq_45801837的博客

11-18

5万+

在vue项目中引入html页面的两种方法第一种：/static/page.html第二种：通过iframe嵌入第一种：/static/page.html 在static或public文件夹下，新建html页面，通过/static/page.html或者/page.html即可访问第二种：通过iframe嵌入第一种方法不需要新建路由，iframe方法在正常的vue页面中内嵌一个其他的html页面，所以需要正常建立路由。 ...

vue-element-admin内嵌html页面

weixin_45973832的博客

03-03

1033

vue-element-admin内嵌html页面

vue嵌套html页面非iframe

09-12

你可以使用Vue Router来实现在Vue应用中嵌套HTML页面，而不使用iframe。以下是一个简单的示例：首先，你需要安装Vue Router： ``` npm install vue-router ``` 然后，在你的Vue应用的入口文件（通常是`main.js`）中，导入Vue Router并配置路由： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/page1', name: 'Page1', component: () => import('./components/Page1.vue') }, { path: '/page2', name: 'Page2', component: () => import('./components/Page2.vue') }, // 其他页面路由配置... ] const router = new VueRouter({ mode: 'history', routes }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在上面的代码中，我们通过`import`语句引入了两个组件`Page1.vue`和`Page2.vue`，并将它们分别与路由路径`/page1`和`/page2`关联起来。接下来，在你的Vue组件中，可以使用`<router-view>`标签来渲染嵌套的HTML页面。例如，在一个名为`App.vue`的组件中： ```vue <template> <div> <h1>My App</h1> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> ``` 最后，在`Page1.vue`和`Page2.vue`组件中，你可以编写嵌套的HTML代码： ```vue <template> <div> <h2>Page 1</h2>  </div> </template> <script> export default { name: 'Page1', } </script> ``` 这样，当用户访问`/page1`时，Vue Router会将`Page1.vue`组件渲染到`<router-view>`标签中，从而实现在Vue应用中嵌套HTML页面的效果。希望对你有所帮助！如有任何问题，请随时向我提问。