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都先删除//然后设置延迟加载百度统计，他会自动把商桥代码也加载进htmllet 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秒后，将自动加载出百度商桥

vue + prerender + html-webpack-plugin 打包商桥项目报错相关推荐

Vue中3.0版本严格模式运行项目报错
vue3.0脚手架搭建项目在运行中报错,如下: 造成报错的原因是,vue3.0脚手架搭建项目的时候使用了严格模式 eslint,然后代码中我们使用了换行这些,就会导致项目运行出错这个时候我们找到pa ...
vue 打包后访问接口报错404 解决方案（前提是在vue里使用了代理）
vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...
vue打包npm run build报错
vue打包npm run build报错: 近期领导要求用vue做一个项目,最近在研究和学习vue,在项目打包时一直报错,这个问题困扰了好久,尝试了很多网上办法,但都没有用电脑每次开机首次执行npm ...
关于webpack打包时less-loder安装报错处理
关于webpack打包时less-loder安装报错 loadercontext.getresolve is not a function 需要换低版本的less-loader 在package.js ...
vue创建项目报错command not found:create-webpack
vue创建项目报错command not found:create-webpack vue创建项目报错command not found:create-webpack,请不要怀疑,是你创建项目命令写错 ...
DEA中创建父子工程与maven打包Springboot聚合工程报错程序包不存在
DEA中创建父子工程与maven打包Springboot聚合工程报错程序包不存在问题描述 springboot 项目打包(package)或安装到仓库(install)的时候报错:程序包com.fu ...
【jenkins打包maven项目报错记录】
jenkins打包maven项目报错记录 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3 ...
Eclipse创建的Maven项目报错Could not calculate build plan: Plugin
Eclipse创建的Maven项目报错Could not calculate build plan: Plugin 2018年05月10日 21:59:25 TIMI-Nian 阅读数:5040 标签 ...
vscode 设置保存格式化，当保存时，单引号变成了双引号，vue项目报错
新建一个vue项目并设置了格式化,当我们在初始化结构目录中进行修改并保存时,会出现单引号变成了双引号,导致运行项目报错问题,解决方法如下: 在项目根目录中,新建一个文件,命名为' .prettierr ...

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

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

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

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

vue + prerender + html-webpack-plugin 打包商桥项目报错相关推荐

最新文章

热门文章