vue-cli升级vue-cli5(webpack5引入）

news2025/2/24 15:15:03

一. 升级目标

vue-cli从v4版本升级到v5版本（同时升级到webpack5）
node-sass不再支持，需要删除依赖，并将/deep/ 替换为v::deep方式

二. vue-cli4升级为vue-cli5

1.全局安装vue-cli

npm install -g @vue/cli
 
// 检查是否更新成功
vue -V

2.一次性更新所有插件

vue upgrade

3.升级至webpack5

npm install webpack@latest webpack-cli@latest

4.修改vue.config.js内配置，升级到webpakc5后部分属性已废弃

1、disableHostCheck: true 替换为  allowedHosts: 'all'
2、jsonpFunction 替换为 chunkLoadingGlobal
3、config.module.rules[0].use.splice(1, 0, { loader: require.resolve('thread-loader') }) 此配置暂时注释

5.替换node-sass（node-sass已停止维护，升级到webpack5后版本不支持，需替换为sass-loader）

// 卸载node-sass
npm uninstall node-sass
 
// 安装sass-loader
npm i sass sass-loader@13.0.2

6.本地验证 npm run serve

三. 常见错误

1.vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次
在这里插入图片描述
解决方法：降低node版本即可，我这边降低后的版本是14.17.0
2. webpack < 5 used to include polyfills for node.js core modules by default

解决方案：

1. npm install node-polyfill-webpack-plugin;
2. 在vue.config.js文件中添加这几行代码：
   const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
    plugins: [new NodePolyfillPlugin()],

四.升级后的依赖文件

// package.json 部分修改
{
    // vue-cli相关
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-router": "~5.0.8",
    "@vue/cli-plugin-vuex": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    ...
    // babel相关
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    ...
    // eslint相关
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-vue": "^8.0.3",
    "eslint-plugin-vuejs-accessibility": "^1.1.0",
    ...
    // webpack相关
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
    ...
    // css相关
    "postcss": "^8.4.16",
    "sass": "^1.54.4",
}