1.使用iframe
<!-- 相对路径/绝对路径 --> <iframe src="../../../static/zsw.html"></iframe> <!-- 网址 --> <iframe src="https://cn.vuejs.org/v2/api/#v-html"></iframe>
2.使用v-html
<template> <div class="mod-config"> <span v-html="html"></span> </div> </template> <script> export default { data () { return { html: ‘‘, } },
created () {
let param = {
accept: ‘text/html, text/plain‘
}
let url = ‘https://cn.vuejs.org/v2/api/#v-html‘
// let url = ‘./static/html/disk.html‘
this.$http.get(url, param).then((response) => {
this.loading = false
// 处理HTML显示
this.html = response.data
).catch(() => {
this.loading = false
this.html = ‘加载失败‘
})
this.getCaptcha()
}
} </script>
还会出现跨域的情况
推荐：https://www.php.cn/js-tutorial-386304.html
3.iframe和v-html的区别
如果是直接引入html文件，v-html只加载html文件中的行内元素和内嵌样式，不加载外部样式（因此也可能不会加载外部的js脚本）。iframe可以加载外部的资源。
4.vue-cli的静态目录
在Vue-cli 2.0 构建的项目中使用 iframe 引用本地静态 html 文件，放在 static文件夹下。
在Vue-cli 3.0 构建的项目中使用 iframe 引用本地静态 html 文件，放在 public 文件夹下。
推荐：https://blog.csdn.net/rudy_zhou/article/details/106003587