Vue 项目中, 使用iframe 引用本地html要如何实现?

Question

目前网上的方法都是将html放在public或者static目录中.

能不能让html放在任何位置也能成功加载

---

本问题又名:

• 在Vue中使用iframe相对路径引入本地html页面，报错404
• Vue使用iframe加载本地的html文件
• Vue利用iframe框架加载本地html文件页面不显示
• Load .html file in the VUE
• Load static HTML files in Vue
• Load local HTML files in Vue

Answer 1

使用 html-loader 就行, 但是 html-loader 和 html-webpack-plugin 冲突 , 自己看着来吧 ;

---

目前我是将静态资源放在 public 目录下, 例如:

<template>
  <div class="receipt-qrcode-agreement">
    <iframe ref="iframe" :src="`/html/payment-code-agreement/${language}/index.html`" frameborder="0" />
  </div>
</template>

<script>
import { get as getLanguage } from '@/utils/language.js'
export default {
  data() {
    return {
      language: ''
    }
  },
  created() {
    this.language = getLanguage()
  },
}
</script>

<style lang="scss" scoped src="./index.scss"></style>

Answer 2

试试使用绝对路径

Answer 3

可以考虑用webpack的copy插件，将其html文件复制到静态目录，这样iframe通过访问复制后的静态路径就行。