vue-cli3项目升级到vue-cli4 的方法总结

请听我详细讲解如何将已有的 vue-cli3 项目升级到 vue-cli4。

1. 概述

vue-cli3 和 vue-cli4 的差异在于，vue-cli4 对于项目结构的更改和插件的升级，更好地支持了现代化的前端技术（Babel7，Webpack4，TypeScript 等），提供了更好的性能和稳定性。因此，升级到 vue-cli4 是必要的，尤其是如果你的项目已经使用了 vue3.0。以下是具体的升级步骤。

2. 准备

首先，我们需要按照 vue-cli4 的要求安装 node.js（建议使用长期支持版本，至少为 v10）和 @vue/cli。

# 安装node.js
https://nodejs.org/en/

# 安装@vue/cli
npm install -g @vue/cli

此外，我们需要备份原有的 vue-cli3 项目，以免升级过程中发生不可预料的错误。

3. 升级

3.1 执行升级命令

在备份完成后，我们可以进入原有的 vue-cli3 项目目录，并执行以下命令进行升级：

vue upgrade --next

此命令会自动将项目转换为 vue-cli4 的格式，并且尝试保留现有的系统文件，如 babel.config.js，postcss.config.js 等。

3.2 修复eslint相关警告

在进行完升级后，我们需要进一步解决一些警告。在 vue-cli4 中，尝试从配置文件中自动加载 eslint 插件。因此，在升级完成后，我们需要根据控制台的错误信息更新 package.json 中的相应配置和插件依赖。

具体来说，在 package.json 中需要添加以下内容：

"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "@vue/standard"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {
    "no-console": "off"
  }
}

同时，需要重新安装一下 eslint 和相关的插件：

npm install eslint eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue@^6.0.0 babel-eslint eslint-config-prettier eslint-plugin-eslint-plugin -D

3.3 修复其他警告和错误

根据你自己的项目配置，进一步查找控制台警告和错误。如果需要，你可以按照以下提示进行更改：

3.3.1 postcss 和 autoprefixer

在更新 postcss 和 autoprefixer 的版本时，我们需要在 vue.config.js 或者 postcss.config.js 中更新 plugins 配置。例如：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('autoprefixer')({
            browsers: ['last 40 versions', 'Firefox >= 5', 'Safari >= 6', 'ie > 8', 'iOS >= 6', 'Android >= 4']
          })
        ]
      }
    }
  }
};

3.3.2 babel

在 vue-cli4 项目中，所有的 babel 配置都保存在 babel.config.js 文件中。因此，我们需要将原有的配置迁移到该文件中。例如：

// babel.config.js
module.exports = {
  presets: [['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]],
  plugins: ['lodash', '@babel/plugin-syntax-dynamic-import']
};

3.3.3 webpack 和 webpack-dev-server

在升级完成后，我们可以根据新版本的文档更新 webpack 和 webpack-dev-server 的配置。例如：

// vue.config.js
module.exports = {
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: 'localhost',
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    publicPath: '/',
    proxy: {},
    quiet: true,
    watchOptions: {
      poll: false
    }
  },

  configureWebpack: {
    plugins: []
  },

  chainWebpack: config => {}
};

3.3.4 其他插件和依赖

根据你的项目配置和依赖，更新其他警告和错误。例如，我们可以更新 lodash 的版本：

npm install lodash@^4.17.15 -D

4. 示例说明

下面是两个示例说明：

示例一

如何升级 vue-cli3 项目到 vue-cli4，并使用 TypeScript：

vue create my-project
cd my-project
vue add typescript
vue upgrade --next

此操作会自动将现有的 vue-cli3 项目升级为 vue-cli4 格式，并支持 TypeScript，同时保留现有的配置文件和插件。此外，我们只需要添加并安装 vue-cli-plugin-typescript 插件即可。

示例二

如何在 vue-cli4 项目中使用 axios：

npm install axios --save

在代码中添加以下内容：

import axios from 'axios';
Vue.prototype.$http = axios;

这样我们就可以在项目中使用 axios 了。此外，我们可以使用 vue-cli-plugin-axios 插件来自动完成此操作：

vue add axios

这样会在项目中自动安装 axios 和 vue-axios 插件。并且添加了示例代码，方便你使用 axios。