最近在做一个vue项目，因项目时间紧张，有一个查看报告的页面及功能没有没有用vue重构，而是把另一个HTML的页面拷贝过来直接使用，但就是再使用的过程中遇到了几个问题，现总结一下。

1，直接访问html页面是访问不到的，会默认访问public文件夹下的index.html页面。
2，好不容易可以访问页面了，又不知道vue怎么像HTML里传值。

针对以上两个问题，在网上找到解决办法如下：

第一步，先把htmt页面引入并能成功访问

办法就是新建一个vue文件，在这个vue文件中使用iframe把这个HTML页面引入

<template>
    <div class="iframe_box">
        <iframe width="100%" src="static/MyReportDetails.html" frameborder="0" scrolling="auto" ref="iframeDom"></iframe>
    </div>
</template>

第二步，解决传值问题，在vue文件中

export default {
    data() {
        return {
            code: null,
            apiUrl: null
        }
    },
    created() {
        this.code = this.$route.params.code;
        this.apiUrl = process.env.VUE_APP_URL;
    },
    mounted() {
        this.iframeWin = this.$refs.iframeDom.contentWindow
        setTimeout(
            () => {
                this.iframeWin.postMessage({
                    cmd: this.code,
                    apiUrl: this.apiUrl,
                    params: {}
                }, '*')
            }, 200);
    }
}

使用postMessage进行传值

第三部，html页面接收值

window.addEventListener('message', (e) => {
   // console.log(e);
    var data = e.data;
    load(data.cmd,data.apiUrl);
});

通过addEventListener接收值

重要的事情说3遍，一定要把html文件放到单独放到static文件夹内，并放到public文件中。因为这样打包的时候不会被编译打包