vue 项目中引入 本地html文件

文章目录

• • 概要
  • 使用：iframe
  • 技术细节
  • 效果展示

概要

提示：在vue项目中引入本地的html文件

使用：iframe

提示：这里主要是使用 iframe 进行展示

整体代码展示：

    <iframe

      ref="myIframe"

      :src="src"

      frameborder="0"

      width="100%"

      height="670"

    ></iframe>

<script>

export default {

  data() {

    return {

      src: "/static/Xk.html", 

                  //   直接引用即可访问（千万不要带相对路径或绝对路径，否则访问不到）

    };

  },

};

</script>

 

技术细节

将html导入public下（静态资源）

 直接引用即可访问（千万不要带相对路径或绝对路径，否则访问不到）

效果展示