若是你使用了element-ui
的el-tabs
组件,而且想要单独升级element-ui
至2.10.0
,你会发现,使用了el-tabs
组件的页面只要打开就卡死。缘由是element-ui~2.10.0
采用了不兼容vue~2.5.10
的写法。因而我尝试系统性升级vue
全家桶,这也是为系统赋予更多能力作准备。结果遇到一些报错,这里记录一下。javascript
vue: 2.5.10
css
vue-loader: 13.5.0
vue
vue-router: 3.0.1
java
vuex: 3.0.1
node
axios: 0.17.1
webpack
element-ui: 2.2.2
ios
vue: 2.6.10
git
vue-loader: 15.7.0
github
vue-router: 3.0.3
web
vuex: 3.1.1
axios: 0.18.1
element-ui: 2.10.0
修改package.json
中的依赖包版本号以后,npm install
一波后就报错了。
Vue packages version mismatch: - vue@2.6.10 - vue-template-compiler@2.5.10 This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler. If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest. @ ./src/router/modules/test/index.js 22:23-67 @ ./src/router/common.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:9532 webpack/hot/dev-server babel-polyfill ./src/main.js
分析:vue
和vue-template-compiler
两个包的版本不匹配,须要升级vue-template-compile
。github搜索这个包搜不到,最后在npm包官网找到了。
解决方案:升级vue-template-compile: 2.6.10
| | <section> | <el-form class="cl-add-form" :model="dataForm" :rules="rules" ref="dataForm" label-width="125px"> | <el-form-item label="法定节假日名称" prop="name"> @ ./src/views/backend/enterprise/holiday/add-public-holiday.vue 1:0-97 30:4-35:6 30:81-35:5 @ ./src/views lazy ^\.\/.*$ @ ./src/authority/generate-routes.js @ ./src/store/modules/user.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:9532 webpack/hot/dev-server babel-polyfill ./src/main.js error in ./src/views/backend/enterprise/holiday/add-special-holiday.vue?vue&type=template&id=09f84cb0& Module parse failed: Unexpected token (2:0) You may need an appropriate loader to handle this file type.
分析:经观察,发现多是不识别vue
文件或其中某部分,因而从vue-loader
入手,也在网上查阅了一些资料,须要在webpack
的plugins
中加入vue-loader/lib/plugin
。
解决方案:
const VueLoaderPlugin = require('vue-loader/lib/plugin') plugins: [ new VueLoaderPlugin(), // 其余插件 ... ]
(Emitted value instead of an instance of Error) ⚠️ PostCSS Loader Previous source map found, but options.sourceMap isn't set. In this case the loader will discard the source map entirely for performance reasons. See https://github.com/postcss/postcss-loader#sourcemap for more information. @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/vue-loader/lib?{"loaders":{"css":["vue-style-loader",{"loader":"css-loader","options":{"sourceMap":false}}],"postcss":["vue-style-loader",{"loader":"css-loader","options":{"sourceMap":false}}],"less":["vue-style-loader",{"loader":"css-loader","options":{"sourceMap":false}},{"loader":"less-loader","options":{"sourceMap":false}}],"sass":["vue-style-loader",{"loader":"css-loader","options":{"sourceMap":false}},{"loader":"sass-loader","options":{"indentedSyntax":true,"sourceMap":false}}],"scss":["vue-style-loader",{"loader":"css-loader","options":{"sourceMap":false}},{"loader":"sass-loader","options":{"sourceMap":false}}],"stylus":["vue-style-loader",{"loader":"css-loader","options":{"sourceMap":false}},{"loader":"stylus-loader","options":{"sourceMap":false}}],"styl":["vue-style-loader",{"loader":"css-loader","options":{"sourceMap":false}},{"loader":"stylus-loader","options":{"sourceMap":false}}]},"cssSourceMap":false,"cacheBusting":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"}}!./src/views/iot-supervise/truck/truck-carousel.vue?vue&type=style&index=0&lang=css& 4:14-1577 14:3-18:5 15:22-1585 @ ./src/views/iot-supervise/truck/truck-carousel.vue?vue&type=style&index=0&lang=css& @ ./src/views/iot-supervise/truck/truck-carousel.vue @ ./src/views lazy ^\.\/.*$ @ ./src/authority/generate-routes.js @ ./src/store/modules/user.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:9532 webpack/hot/dev-server babel-polyfill ./src/main.js
分析:这里面的错误是关于postcss-loader
的,只要将config/index.js
中dev.cssSourceMap
设置为true
便可。
升级过程当中还遇到了一个警告,虽然不影响功能,可是看着仍是很难受的。
in ./src/icons/svg/workList.svg svg-sprite-loader exception. 28 rules applies to D:\coollu\projects\coollu-v3\source-code\v1.0.1\update-elementui-test\src\icons\svg\workList.svg @ ./src/icons/svg \.svg$ @ ./src/icons/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:9532 webpack/hot/dev-server babel-polyfill ./src/main.js
搜索关键词后,发现网上并无此类答案。所以我考虑是版本问题,因而升级svg-sprite-loader
至最新版本4.1.6
,解决了这个警告问题。
至此升级过程就完成了!顺便一提,系统性升级必需要通过全面测试,不然你难以保证彻底向下兼容哦!