vue全家桶版本升級排錯

背景

如果你使用了element-ui的el-tabs組件，並且想要單獨升級element-ui至2.10.0，你會發現，使用了el-tabs組件的頁面只要打開就卡死。原因是element-ui~2.10.0采用了不兼容vue~2.5.10的寫法。於是我嘗試系統性升級vue全家桶，這也是為系統賦予更多能力做准備。結果遇到一些報錯，這里記錄一下。

升級過程

當前版本

vue: 2.5.10

vue-loader: 13.5.0

vue-router: 3.0.1

vuex: 3.0.1

axios: 0.17.1

element-ui: 2.2.2

目標版本

vue: 2.6.10

vue-loader: 15.7.0

vue-router: 3.0.3

vuex: 3.1.1

axios: 0.18.1

element-ui: 2.10.0

報錯1(包版本不匹配)

修改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

報錯2(vue-loader)

|
| <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(),
    // 其他插件
    ...
]

報錯3(postcss-loader)

(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即可。

警告1(svg-sprite-loader)

升級過程中還遇到了一個警告，雖然不影響功能，但是看着還是很難受的。

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，解決了這個警告問題。

---

總結

至此升級過程就完成了！順便一提，系統性升級必須要經過全面測試，否則你難以保證完全向下兼容哦！

原文連接