[JavaScript知识库]vue组件使用iframe加载本地html页面

需求

最近遇到一个需求，一个现成的页面使用jquery实现的，现在要嵌入到vue里，笔者表示要偷个懒，不想再画时间改成vue形式的,就采用iframe将改html直接渲染到界面上

操作

1.准备好自己的html页面，比如笔者的html文件夹叫做card,入口是index.html,放在根目录的public目录下

2.在你的vue组件页面放入iframe，注意这里路径很重要，因为不仅要在运行的时候正常显示，打包后也需要正常显示 ，所以要使用的路径相当于跟vue项目public目录下的入口文件index.html同级，路径为card/index.html

<iframe src="card/index.html"  scrolling="no"  style="width: 100%;height: 500px;" frameborder="0" ></iframe>

3.这样可以完美的将页面渲染到vue页面上了