vue cli项目升级--vue cli3升级到vue cli4

╰+攻爆jí腚メ 2023-09-28 12:09 106阅读 0赞

原文网址：[vue cli项目升级--vue cli3升级到vue cli4\_IT利刃出鞘的博客-CSDN博客][vue cli_--vue cli3_vue cli4_IT_-CSDN]

## 简介 ##

**说明**

本文介绍如何升级vue项目的vue cli版本。

**官方网址**

[https://cli.vuejs.org/migrations/migrate-from-v3.html][https_cli.vuejs.org_migrations_migrate-from-v3.html]

[https://cli.vuejs.org/zh/guide/installation.html\#升级][https_cli.vuejs.org_zh_guide_installation.html]

**为什么要升级？**

Vue Cli4相对于Vue Cli3的改变：

1.  项目结构更合理
2.  依赖更新一些

详见：[@vue/cli4--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客\_vuecli4中文文档][vue_cli4--_IT_-CSDN_vuecli4]

## 升级的步骤 ##

### 1.卸载旧版vue cli ###

npm uninstall vue-cli -g

或

yarn global remove vue-cli

### 2.安装新版vue cli ###

npm install -g @vue/cli

或

yarn global add @vue/cli

**检查安装的版本**

vue -V

输出:@vue/cli 4.x.x 说明@vue/cli 4安装成功

(vue cli 3的版本会输出 3.x.x)

### 3.升级项目依赖 ###

#### 方法 ####

到项目的根目录下执行命令：

vue upgrade

此命令可以升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头）

**如图所示**

![20191026184414364.png][]

提示：是否更新这些插件。输入Y即可

#### **执行结果** ####

**执行完发现主要有 2 个文件被修改**

**1.babel.config.js**

主要是 babel 的预设由@vue/app 改成了@vue/cli-plugin-babel/preset

原来的：

module.exports = {
      presets: [
        '@vue/app', //  这行
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'entry'
          }
        ]
      ]
    }

升级后：

module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset', //  这行
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'entry'
          }
        ]
      ]
    }

**2.package.json**

（package-lock.json 也会更改）

主要是依赖升级

原来的

{
      "@vue/cli-plugin-babel": "^3.11.0",
      "@vue/cli-plugin-eslint": "^3.11.0",
      "@vue/cli-service": "^3.11.0"
    }

升级后

{
      "@vue/cli-plugin-babel": "^4.0.5",
      "@vue/cli-plugin-eslint": "^4.0.5",
      "@vue/cli-service": "^4.0.5"
    }

### 4.手动解决问题 ###

启动项目

npm run serve

然后报下面的错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTUzNTM3_size_16_color_FFFFFF_t_70][]

**1.第一个错（警告）**

> WARN A new version of sass-loader is available. Please upgrade for best experience.

这行是 vue cli 4 升级了自己的依赖 sass-loader 导致的

它把 sass-loader由 ^7.x.x 的版本升级到了 ^8.0.0,而我项目中使用的是^7.1.0

所以升级一下自己项目的 sass-loader 就好了

执行下面命令即可

npm i sass-loader@8.0.0 -D

**2.第二个错：没有安装core-js**

vue cli 4把 core-js由 ^2.x.x 的版本升级到了 ^3.x.x

于是安装一下

npm i core-js

然后重启项目还是不行，看了下官方文档和 babel 有关

main.js 代码中

import '@babel/polyfill'

隐藏这个代码

重启好了

然后把 @babel/polyfill 换成 babel-polyfill 即可

npm i babel-polyfill

main.js 代码中 改为

import 'babel-polyfill'

## 其他网址 ##

[vue cli 3 升级到 vue cli 4 方法步骤及升级点总结\_xiaofei0627的博客-CSDN博客\_vue-cli 升级][vue cli 3 _ vue cli 4 _xiaofei0627_-CSDN_vue-cli]

[vue cli_--vue cli3_vue cli4_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125457281
[https_cli.vuejs.org_migrations_migrate-from-v3.html]: https://cli.vuejs.org/migrations/migrate-from-v3.html
[https_cli.vuejs.org_zh_guide_installation.html]: https://cli.vuejs.org/zh/guide/installation.html#%E5%8D%87%E7%BA%A7
[vue_cli4--_IT_-CSDN_vuecli4]: https://knife.blog.csdn.net/article/details/121482997
[20191026184414364.png]: https://img-blog.csdnimg.cn/20191026184414364.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTUzNTM3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191026184353496.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTUzNTM3,size_16,color_FFFFFF,t_70
[vue cli 3 _ vue cli 4 _xiaofei0627_-CSDN_vue-cli]: https://blog.csdn.net/qq_39953537/article/details/102759821