可通过iframe嵌入html页面，将文件置于public目录并用src引用；2. 使用fetch获取html内容结合v-html渲染，注意防范xss；3. 借助raw-loader等工具在构建时导入html字符串；4. 结合vue router按需加载静态页面内容。
如果您在Vue项目中需要运行或嵌入HTML页面，可能是因为需要展示静态内容、集成外部页面或复用已有HTML资源。以下是实现该功能的具体方法：
一、使用iframe嵌入HTML页面
通过iframe标签可以在Vue组件中直接嵌入一个完整的HTML页面，适用于加载本地或远程的独立HTML文件。
1、在Vue组件的模板中添加<iframe></iframe>标签，并设置其src属性指向目标HTML文件。
2、确保HTML文件已放置在public目录下（如public/demo.html），以便能被正确访问。
立即学习“前端免费学习笔记（深入）”；
3、编写如下代码：。
4、根据需要调整样式以适配布局，例如设置边框为无或控制滚动行为。
二、通过动态引入方式加载HTML内容
利用fetch或axios获取HTML文件内容，并将其插入到组件的DOM中，适合需要对内容进行处理的场景。
1、将HTML文件放在public目录中，例如public/content.html。
2、在Vue组件的mounted钩子中使用fetch请求该文件。
3、将返回的文本内容赋值给组件的数据属性，并使用v-html渲染。
4、示例代码：this.$el.innerHTML = await (await fetch('/content.html')).text()。
5、注意：使用v-html时需确保内容安全，避免XSS攻击。
三、使用第三方库加载外部页面
借助如vue-html-loader或html-embed等工具，可在构建阶段将HTML文件作为模块导入。
1、安装相关依赖，例如执行命令：npm install raw-loader --save-dev。
2、配置webpack规则，使.html文件可通过raw-loader加载。
3、在组件中通过import语法导入HTML字符串：import htmlContent from './assets/page.html?raw'。
4、将导入的内容绑定到模板中的v-html指令上进行渲染。
四、利用路由懒加载静态页面
当需要将HTML页面作为单独路由展示时，可结合Vue Router实现按需加载。
1、创建一个新的路由项，指向一个专用组件。
2、在该组件内使用fetch方法加载指定HTML文件内容。
3、通过dangerouslySetInnerHTML类似机制（即v-html）注入内容。
4、确保路径配置正确，且服务器支持对该HTML文件的静态资源访问。
