vue + prerender + html-webpack-plugin 打包商桥项目报错

vue + prerender + html-webpack-plugin 打包百度商桥项目报错

因为使用了vue + prerender + html-webpack-plugin 打包

这里打包使用了预渲染静态 html ,渲染时会把百度商桥和离线宝的 js 也镶嵌到 html 代码里面 ，而百度商桥和离线宝的 js不能静态加载

所以要把静态 html 里的 baidu.com 有关商桥和离线宝的js都先删除

然后设置延迟加载百度统计代码，他会自动把百度商桥和离线宝的代码也加载进html

新建一个hm.js ,内容如下：

export default {
    hm: function () {
        if(T){
            clearTimeout(T);
        }
        //因为使用了vue + prerender + html-webpack-plugin 打包
        //这里打包使用了预渲染静态 html ,渲染时会把百度的 js 也镶嵌到 html 代码里面
        //所以要把静态 html 里的 baidu.com 有关商桥和离线宝的的js都先删除
        //然后设置延迟加载百度统计，他会自动把商桥代码也加载进html
        let script = document.getElementsByTagName('SCRIPT')
        for(let x in script){
            if(script[x].src && script[x].src.indexOf('baidu.com') !== -1){
                console.log(script[x].src);
                script[x].remove();
            }
        }


        let T = setTimeout(function(){
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?百度统计id";
            hm.id = "123123";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        },1000);

    },
}

在vue组件，例如index.vue中引入 hm.js ，并在mounted中调用函数

<template>
    <div class="index">
    </div>
</template>

<script>

    import hm from './../utils/hm.js';
    export default {
        name: 'index',

        data() {
            return {
            }
        },

        components: {
        },

        mounted() {
            let that = this;
            // 百度商桥
            hm.hm();
        },
        destroyed: function () {
            // 百度商桥
            var child=document.getElementById("newBridge");
            child.parentNode.removeChild(child);
        },
    }
</script>

在使用 npm run build 打包，延迟1秒后，将自动加载出百度商桥