html iframe 相对路径,vue中 iframe 引入 本地静态html文件，vue-cli2与vue-cli3引用的差异。...

引言

在写个人网站的时候，需要用到 iframe 引用本地静态的 html 文件，发现引用方式的一些差异，在此分享一下。Vue-cli 2.0 构建的项目引用

在vue-cli 2.0 构建的项目中，如果要使用 iframe 引用本地的静态 html 文件，静态文件需要放置在和 src 同级的文件加夹 static 中。

如下图：

在使用 iframe 的地方直接写 “相对路径” 就行，如下图：

这里还是需要解释一下，这里的路径，在打包后不会变化。都是根据打包后的路径查找静态文件，因此上方用 “相对路径” 描述并不准确，而是打包后的 “相对路径”，看下图就明白了。

这是 打包后的文件层级关系

这里我写了很多 ../../../，最后发现真实的引用路径还是 http://localhost:8080/static/blog.html，因为向上查找已经到根目录了，所以不管写多少个../，实际路径还是http://localhost:8080/static/blog.html，因此 下方路径直接写 ./static/blog.html 也是一样的，根据上方打包后的层级关系对照一下就明白了。

Vue-cli 3.0 构建的项目引用

在Vue-cli 3.0 构建的项目中使用 iframe 引用本地静态 html 文件，和 2.0基本一样，唯一的区别在于，静态html 文件不是放置在 src 同级的文件夹中，而是放在 public 文件夹下。

如下图：

当然，也可以不用放在 static 文件夹下。public 文件下的文件(包括文件夹)，打包后的层级不会发生变化，因此可以自定义名称。

不能改变的是，只能放在public 文件夹下。

其它注意点与Vue-cli 2.0 构建的项目相同，就不一一赘述。

那有没有随意放在其它层级还能使用的方法，而且不需要考虑Vue-cli 2.0 还是 3.0 构建的项目，其实也是有的。

不考虑项目构建版本的方法

1.如果你是webpack工程师，你就自己配置打包方式。

好吧，这是废话

2.使用require() 引入

html 文件我放在和 vue 文件同级，如下：

Home.vue 中这样写

switch

复制代码export default {  name: "Home",  data() {return {      ifIframe: true,      iframeData: require("./blog.html")      // src: "./static/blog.html"};

},  mounted() {this.$refs.iframe.contentDocument.documentElement.innerHTML = this.iframeData;

},  methods: {clickHandle() {      // 1.通过DOM操作切换数据源信息  // 因可能在iframe内部点击了外链信息，src会发生改变，可能就不属于同源。不同源外部就无法操作iframe内部DOM，因此使用v-if 删除DOM后再显示清空src信息  // 也可以使用其他方式清除，比如用v-bind 绑定src  // this.ifIframe = false;  this.$refs.iframe.removeAttribute("src");      this.$nextTick(() => {// this.ifIframe = true;this.$nextTick(() => {          this.$refs.iframe.contentDocument.documentElement.innerHTML = require("./second.html");

});

});      // 2.切换路径促使切换数据  // this.src = "./static/second.html";}

}

};复制代码

上面就是通过 require() 获取到文件，再给 iframe 的 contentDocument.documentElement.innerHTML 赋值。

这种方式有一点问题就是，不同源的 iframe 无法操作内部 Dom 信息，所以可以使用 removeAttribute  删除 src 再赋值，上方code 中也有描述。

使用这种方式还需要安装html-loader 插件，不然require() 引入的文件无法解析。

使用命令安装：npm i html-loader --save-dev复制代码

再在 vue.config.js 配置，没有这个文件的就自己新建一个，放在最外层。module.exports = {  chainWebpack: config => {

config.module

.rule("html")

.test(/\.html$/)

.use("html-loader")

.loader("html-loader");

}

};复制代码总结

好了，以上就是在vue 项目使用iframe 引用 本地静态 html 文件的方法。

为了大家更加实际的体会，上方的两个例子写了一个demo 上传到github上了，上面看不懂的，可以直接下载例子参考。