之前都是在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 = urldocument.getElementById("refFrame").height = 640document.getElementById("refFrame").width = 360}}
