关于vue的性能优化,有一个非常重要的点,就是用cdn的方式引入vue、vue- router、ElementUI、vuex、axios、jquery,那么到底怎么引呢?
1、打开国内cdn服务网址: https://www.bootcdn.cn/
2、查看你的项目 package.json ,查看你安装的是哪个版本
3、在cdn的服务网站上搜索就可以啦
这时候运行,发现报错了:
Cannot redefine property: $router
不可重复定义 $router ,
4、解决办法:webpack.base.conf.js
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT'
},
5、之后要重启!!!
另外一个问题:在使用cdn之前,我们需要解决当前路由重复点击报错的问题,在使用了cdn之后,就不需要了,可能是封装进去了?有待考察。。。
// 解决vueRouter 跳转相同路由报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}