开箱即用 - 在vue中引入.html文件并渲染的使用总结

开箱即用 - 在vue中引入.html文件并渲染的使用总结

1.业务需求：

• 最近在项目中遇到了一个需求，在vue的模版中引入外部的HTML文件（这个HTML文件是后端生成的），并且渲染出来。

2.需求分析：

• 在vue中引入.html文件，我们一般的思路是先新建一个容器，然后再在vue中将HTML文件引入，然后再给容器的innerHTML属性进行赋值，照着这个思路干就对了。

3.解决方案：

• 1.首先我们新建一个这个容器，这个容器我使用的是iframe标签（那么为什么偏偏用它？因为在同域下能自由操作iframe里的内容和父框架的内容(DOM)，而且因为iframe出现的比较早，所以它的兼容性是比较好的。引入外部HTML用它就行了）：

• <--! frameborder属性：不设置边框，如果是vue2.x版本，那么可以使用src属性 -->
  <iframe style="width: 100%; height: 800px;" id="tempHtml" ref="tempHtml" frameborder="0"></iframe>
  

• 2.在vue单页的data里面引入外部HTML文件：

• // 我的外部文件是temp.html
  ifeData:require('./common/temp.html'),
  

• 3.对容器的innerHTML属性进行赋值（注意：如果是vue2.x版本，那么对iframe的src属性赋值即可，如果是vue3.0及以上，那么涉及到的是 contentWindow,和contentDocument，iframe.contentWindow表示获取iframe的window对象，iframe.contentDocument表示获取iframe的document对象，这两个API只是DOM节点提供的方式 ）：

• 	  // 方法1：
        this.$refs.tempHtml.contentDocument.documentElement.innerHTML = this.ifeData
        // 方法2：
        document.getElementById('tempHtml').contentDocument.documentElement.innerHTML = 		this.ifeData
  

• 最总效果如下：
  

4.注意事项：

• 如果实现没有上述的效果，出现了以下的报错：

• 

• 那么此时注意：这个报错的原因是此时的vue项目无法正常加载HTML文件，所以此时我们需要借助html-loader插件，所以首先是安装插件：

• // 安装
  npm install -S html-loader
  

• 第二步，如果项目是vue3.0及以上版本，那么在vue.config.js里面进行配置：

•   chainWebpack: config => {
      config.module
        .rule("html")
        .test(/\.html$/)
        .use("html-loader")
        .loader("html-loader");
    }
  

• 此时上述问题就解决了。