vue2.6升级vue2.7（panjiachen升级指南）vue-cli5多页面应用升级的坑

vue2.7升级指南

vue2.7升级指南

之前的架子使用的是 panjiachen，使用的是 vue2.6.14，现在升级为 vue2.7.x

升级@vue/cli

vue upgrade

这里推荐使用 vue upgrade 命令自动升级

# 确保安装全局 @vue/cli
$ npm install -g @vue/cli
$ vue upgrade

WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes
✔  Gathering package information...
  Name                    Installed       Wanted          Latest          Command to upgrade
  @vue/cli-service        4.4.4           4.4.4           5.0.8           vue upgrade @vue/cli-service
  @vue/cli-plugin-babel   4.4.4           4.4.4           5.0.8           vue upgrade @vue/cli-plugin-babel
  @vue/cli-plugin-eslint  4.4.4           4.4.4           5.0.8           vue upgrade @vue/cli-plugin-eslint
? Continue to upgrade these plugins? Yes
Upgrading @vue/cli-service from 4.4.4 to 5.0.8
🚀  Running migrator of @vue/cli-service
✔  Successfully invoked migrator for plugin: @vue/cli-service
Upgrading @vue/cli-plugin-babel from 4.4.4 to 5.0.8
🚀  Running migrator of @vue/cli-plugin-babel
✔  Successfully invoked migrator for plugin: @vue/cli-plugin-babel
Upgrading @vue/cli-plugin-eslint from 4.4.4 to 5.0.8
🚀  Running migrator of @vue/cli-plugin-eslint
📦  Installing additional dependencies...
✔  Successfully invoked migrator for plugin: @vue/cli-plugin-eslint
 eslint  ESLint upgraded from v5. to v7

这里发现有 3 个文件发生了修改，babel.config.js 实际上没有发生改变

vue upgrade 帮你做的事情

如果不这么做，需要进行如下操作，十分麻烦。如果依赖冲突，可以使用 npm i --legacy-peer-deps 进行安装

1. 将 @vue/cli-xxx 依赖升级至最新版本范围，这里我打算使用 vue-cli5

   • v4 升级至 ~4.5.18
   • v5 升级至 ~5.0.6

   $ npm i @vue/cli-plugin-babel@5 @vue/cli-plugin-eslint@5 @vue/cli-service@5 -D
   
   - "@vue/cli-plugin-babel": "4.4.4"
   - "@vue/cli-plugin-eslint": "4.4.4"
   - "@vue/cli-service": "4.4.4"
   + "@vue/cli-plugin-babel": "^5.0.8"
   + "@vue/cli-plugin-eslint": "^5.0.8"
   + "@vue/cli-service": "^5.0.8"
   

2. 升级 eslint，并安装 @babel/core

   $ npm i eslint@7 eslint-plugin-vue@8 -D
   - "eslint": "6.7.2"
   - "eslint-plugin-vue": "6.2.2"
   + "eslint": "^7.32.0"
   + "eslint-plugin-vue": "^8.0.3"
   + "@babel/core": "^7.12.16"
   

   还需要升级 eslint 对应的 parser，安装 @babel/eslint-parse

   $ npm un babel-eslint
   $ npm i @babel/eslint-parser@7 @babel/core@7
   
   - "babel-eslint": "10.1.0"
   + "@babel/eslint-parser": "^7.12.16"
   

   之后修改 .eslintrc.js 对应的 parse

   module.exports = {
        
        
     parserOptions: {
        
        
       parser: '@babel/eslint-parser'
     }
   }
   

解决@vue/cli报错

升级完 vue-cli 需要解决一下 vue-cli 语法升级报的错，需要修改 vue.config.js

1. 之前使用 JSDoc 的形式可以改为 defineConfig 帮手函数

   /**
    * @type {import('@vue/cli-service').ProjectOptions}
    */
   module.exports = {
        
         }
   
   // 需要改为如下内容
   const {
        
         defineConfig } = require('@vue/cli-service')
   module.exports =