HTML页面通过iframe嵌套Vue项目

之前都是在Vue项目中通过iframe嵌套外部写好的HTML页，但是最近接触了一个需求，是需要在HTML页面中嵌入Vue项目。

Vue项目打包完成之后会形成一个包含所有静态资源的文件夹，点击HTML页可以运行（后端解决的跨域），现在需要新建一个test.html页去嵌套Vue打包后形成的HTML页，在test.html中有几个input框，输入完成之后点击搜索按钮，Vue项目会显示出来，同时请求了后端接口数据进行显示（接口是在Vue项目中请求的，参数是通过window.location.href获取的）。

解决方案：
在test.html中引入vue.js文件，创建input框和搜索按钮，当点击按钮的时候加载iframe嵌套的html页。

<!-- 条件搜索区 -->
<div>
    <el-input v-model="CourseId" clearable placeholder="请输入条件"></el-input>
    <el-button type="primary" @click="getExamReport">搜索</el-button>
</div>
<!-- 内容展示区 -->
<div class="main-content">
    <iframe id="refFrame" width="0" height="0"></iframe>
</div>

methods: {
	getExamReport() {
	   // Vue项目打包后的存放路径 + 参数
	   const url = `http://xxx.html?CourseId=${this.CourseId}`
	   // iframe的请求地址以及显示样式
	   document.getElementById("refFrame").src = url
	   document.getElementById("refFrame").height = 640
	   document.getElementById("refFrame").width = 360
	}
}