vue全家桶版本升级排错(1)，高级前端开发

最新推荐文章于 2024-07-28 13:37:52 发布

2401_84097658

最新推荐文章于 2024-07-28 13:37:52 发布

阅读量1.2k

点赞数 13

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84097658/article/details/137379297

版权

程序员专栏收录该内容

258 篇文章 0 订阅

订阅专栏

文章讲述了在Vue项目中遇到的版本不匹配问题，涉及vue-template-compiler升级和处理不同loader如vue-loader、postcss-loader的配置。作者提供了详细的错误分析和解决方案，包括如何升级包和调整Webpack配置以确保项目顺利运行。

摘要由CSDN通过智能技术生成

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)

@ ./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