最近接手公司的一个老项目，项目运行起来就要6-8分钟，打包就更慢了。首先看了下package.json。首先看到webpack3就知道项目有历史了。于是对项目的依赖做了升级，比如webpack及周边库版本，vue及周边库版本，eslint等等。对比如下：
之前项目部分package.json
"dependencies": {
"vue": "^2.3.3",
"vue-router": "^2.3.1",
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint-loader": "^1.7.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"inject-loader": "^3.0.0",
"node-sass": "^4.9.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"sass-loader": "^6.0.6",
"vue-loader": "^12.1.0",
"vue-template-compiler": "^2.3.3",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
}
升级后项目改动package.json
"dependencies": {
"vue": "^2.6.10",
"vue-router": "^3.0.6",
},
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-stage-2": "^7.0.0",
"babel-loader": "^8.0.6",
"copy-webpack-plugin": "^5.0.3",
"css-loader": "^2.1.1",
"eslint-loader": "^2.1.2",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"inject-loader": "^4.0.1",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^7.3.1",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.32.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-dev-middleware": "^3.4.1",
"webpack-merge": "^4.2.1"
}
改完依赖后删除node_modules。然后重新cnpm i。然后开始进行一系列的报错修复
-
首先是.babelrc，因为babel做了升级，名字会不一样所以要改一下，这里就不截图了。
-
报错：
这里是说 contenthash webpack4 识别不了，也就是没有这个属性值了，换成了md5:contenthash:hex:8
修复：
把webpack.dev.conf.js和webpack.prod.conf.js都改
继续运行项目报错：
修复：
看报错信息是vue-loader无法解析 .vue文件里面的样式，查看vue-loader官网得知
vue-loader@15.*之后 必须配置带有VueLoaderPlugin
4.继续运行项目，运行过程中没有报错
5.运行后重复点击路由会在控制台报错
解决这个错误也非常简单。只需要在router /index的页面里面 加入
try {
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
} catch (e) { console.log(e) }
6.最后一步重点来了！！！！！！！
Vue-router跳转界面后显示空白，要刷新之后才会显示新页面，地址栏也跳转了 因为升级了vue-router所以addRoutes的写法也要变
至此项目升级完毕
