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 中这样写

<template>
  <div class="home">
    <button @click="clickHandle">switch</button>
    <iframe ref="iframe" frameborder="0" v-if="ifIframe"></iframe>
  </div>
</template>

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上了，上面看不懂的，可以直接下载例子参考。

vue-cli2.0 构建的项目使用iframe 引用本地静态html文件的demo
vue-cli3.0 构建的项目使用iframe 引用本地静态html文件的demo