本文介绍了Vue2项目依赖升级的过程，包括使用npm-check检查并更新依赖，遇到的如eslint-plugin-import等模块找不到的问题，stylus-loader降级以及解决eslint格式错误的方法。特别强调即使使用cdn引入Vue，也需要npm安装Vue，以确保vue-loader的正确配置。
基础信息
| 当前依赖项 | 依赖版本 |
|---|---|
| vue-cli，vue-cli-service | 3.9.2 |
| webpack | 4.0 |
查看vue-cli项目webpack配置：vue inspect > webpack.config.js
升级方式
全局安装npm-checknpm install -g npm-check
使用 npm-check 命令检查需要更新的依赖，如下图所示
使用 npm-check -u 命令更新依赖，如下图所示
| 包名 | 当前版本 | 升级后版本 |
|---|---|---|
| @vue/cli-plugin-babel | 3.12.1 | 4.5.12 |
| @vue/cli-plugin-eslint | 3.12.1 | 4.5.12 |
| @vue/cli-service | 3.12.1 | 4.5.12 |
| @vue/eslint-config-standard | 4.0.0 | 6.0.0 |
| eslint | 5.16.0 | 7.23.0 |
| eslint-plugin-vue | 5.2.3 | 7.8.0 |
| pug | 2.0.4 | 3.0.2 |
| stylus-loader | 3.0.2 | 5.0.0 |
问题
1. 找不到eslint-plugin-import模块
运行：npm i eslint-plugin-import --save-dev
2. 找不到eslint-plugin-node模块
运行：npm i eslint-plugin-node --save-dev
3. 找不到eslint-plugin-promise模块
运行：npm i eslint-plugin-promise --save-dev
4. stylus-loader版本过高，降回原始版本3.0.2
5. 找不到babel-eslint模块
运行：npm i babel-eslint --save-dev
6. 运行出现eslint语法错误，因为新版eslint规则发生变化
运行：eslint --fix --ext .js,.vue src 格式化代码，剩余不可格式化代码需人工校正
特别注意
vue-cli4内部源码根据项目vue版本判断了需要使用哪种类型的loader，所以即使使用cdn引入vue，也一定要npm安装vue。否则vue-cli将不会生成vue-loader配置，导致无法解析vue模版语法。
扫一扫
2689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
