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

Raymond
  • 4.1k

目前网上的方法都是将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
回复
阅读 1.5k
3 个回答
✓ 已被采纳

使用 html-loader 就行, 但是 html-loaderhtml-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>
如是观
  • 1
新手上路,请多包涵

试试使用绝对路径

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏