vue2 项目 | 升级 vue-cli (@vue/cli-service)

问题: 已有 vue2 项目如何安全升级 vue-cli (@vue/cli-service) ？

背景: 原有项目使用 @vue/cli-service@4.0.x ，它集成的 babel 不支持增加 ?. 相关 babel插件。

解决思路: 安全升级为最新的 @vue/cli-service@5.0.x 。

1 使用最新版本 @vue/cli 创建新项目

# 查看 @vue/cli 脚手架工具的版本号
vue -V
# 输出: @vue/cli 5.0.8

# // 👉 全局安装(升级)最新版本的 @vue/cli 工具
npm uninstall @vue/cli -g
npm install @vue/cli -g

# // 👉 基于最新版本的 @vue/cli ，创建一个新项目
vue create project-new-temp

2 拷贝、安装 老项目 依赖

# // 👉 拷贝 原本老项目的 package.json 中**非 vue 包信息**等。
# 复制 package.json 中的 dependencies 包信息
# 复制 package.json 中的 devDependencies 包信息
# 复制 package.json 中的其他信息，如：scripts/name/version

# // 👉 安装 老项目依赖
npm install

3 拷贝、格式化 老项目 文件

# // 👉 拷贝原本老项目的文件夹 src 、 public **等**
# 复制 src 文件夹
# 复制 public 文件夹

# // 👉 使用 eslint 格式化文件
npm run lint
# (新版本 vue-cli 的 eslint 校验配置修改了，会报错) 
# <!-- FIXME (2023-12-13)  ... 所以怎么解决？ -->

4 手动合并 老项目 文件

# 需要手动合并修改新项目的文件，如下：
# // 👉 .eslintrc.js 使用插件不同
# // 👉 vue.config.js 语法变化
# <!-- FIXME (2023-12-13) 具体变化了啥？ -->

5 常见问题 less 降级

# 报错
Module build failed (from ./node_modules/less-loader/dist/cjs.js):

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

原因是 iview 使用的 less 版本比较低，需要将当前使用的 less 版本降到 3.0 以下即可。

npm uninstall less less-loader

npm install less@2 -D
npm install less-loader@5 -D --force