在vue项目中引入html静态页面的一些问题

最新推荐文章于 2025-10-29 17:56:49 发布

原创最新推荐文章于 2025-10-29 17:56:49 发布 · 7.4k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

本文介绍了在Vue项目中如何快速展示静态HTML页面供客户查看。一种方法是利用Vue的路由和iframe嵌入静态页，另一种是通过window.open()函数直接打开页面。每种方法都有其适用场景，例如iframe适用于组件内部嵌套，而window.open()则可在新窗口或替换当前页面展示。但后者可能导致失去Vue的导航控制。文章探讨了这两种方式的优缺点，并提示了路径设置和资源引用的注意事项。

在项目中追加模块时遇到了一些需求，追加模块的模型做好了，但是将模型转换成真正的页面代码需要一段时间，而客户需要现在项目里看到静态效果，就需要用到一些方法将vue引入静态页面。

1.最直接的方法就是在vue中嵌入html文件,通过iframe进行引入，如下图

在router中的index.js进行设置路由跳转（文件名为outfall.vue）

export default new Router({
  routes:[
    {
      path:'/outfall', //路由路劲
      name:'outfall',  //名称
      component:outFall    //跳转组件名
    }
  ]
})

然后通过click方式进行引入跳转

<el-button type="primary" @click="this.$router.replace("/outfall")"></ek-button>

2.第二种方法window.open(url)

第一种方法虽然简单快捷还不容易出错，但有限制，如果是在组件内点击跳转，会受到父组件的影响（容易变成真实页面内的某一父元素框内嵌套了整个静态页面）。往往有时候，需要再点击后，将整个页面替换成静态页面，这时，window.open就发挥作用

以下内容为网络转载

（1）语法部分：

window.open([URL], [窗口名称], [参数字符串])

（2）参数说明：

① URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
② 窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_selft"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
③ 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表：

解决方法：

（1）将需要跳转的静态html页面文件放入到public中去（必须放到静态文件目录下，否则会被webpack解码导致出错）

注意！如果此静态页面含有css和js文件，要打包放进同一个新建文件夹内，路径记得要修改

（2）在所需进行点击跳转的地方设置跳转即可

<el-button type="primary" @click="window.open('/outfall/outfall.html','_self')"></ek-button>

注意点：当你在输入路径时，用vscode会自动帮你列出下一个目录，但如果你跟他一个个往下选择的化，会导致跳转404报错

原因是，vue封装时初始路径默认为public，所以不用加/public。

此方法问题也有很多，比如跳转后，完全变成静态页面，想要后退只有点击浏览器的后退，没有别的操作方法，如果有大神会在原型静态文件进行修改，或者有更好的引入方法，请务必教教我，谢谢！