vue-cli3升级到vue-cli4，同时将vue2.6升级到vue2.7

对于项目太大，升级有难度，又想体验compositionAPI的可以先过渡到vue2.7
官方升级指南：https://blog.vuejs.org/posts/vue-2-7-naruto.html

1. 删除lock文件和node_modules，防止有缓存

• 如果使用yarn安装的依赖，删除yarn.lock
• 如果是用npm，删除package-lock.json
• 如果是用pnpm，删除pnpm-lock.yaml

2. 升级vue-cli的版本

• 如果脚手架版本是4.x.x，推荐升级到~4.5.18
• 如果脚手架版本是5.x.x，推荐升级到~5.0.6

由于当前我的项目的用的还是vue-cli3，所以这里升级到vue-cli4；

修改前：

 "@vue/cli-plugin-babel": "^3.12.1",
 "@vue/cli-plugin-eslint": "^3.12.1",
 "@vue/cli-service": "^3.12.1",
1
2
3

修改后：

 "@vue/cli-plugin-babel": "~4.5.18",
 "@vue/cli-plugin-eslint": "~4.5.18",
 "@vue/cli-service": "~4.5.18",
1
2
3

升级下core-js，因为不升级我这里会报"* core-js/modules/es6…"类似的错误

修改前：

"core-js": "^2.6.11",
1

修改后：

"core-js": "^3.25.1",
1

升级下sass-loader，vue-cli4支持的最低的sass-loader版本是8.0

修改前：

 "sass": "~1.32.6",
 "sass-loader": "^7.3.1",
1
2

修改后：

 "sass": "~1.32.6",
 "sass-loader": "^8.0.2",
1
2

修改vue.config.js里， CSS 相关的 loader 传递选项，data改为prependData

修改前：

  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/variables.scss";@import "@/common.scss";`
      }
    }
  }
1
2
3
4
5
6
7

修改后：

  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/variables.scss";@import "@/common.scss";`
      }
    }
  }
1
2
3
4
5
6
7

修改babel.config.js

修改前：

module.exports = {
  presets: [
    '@vue/app'
  ]
}
1
2
3
4
5

修改后：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}
1
2
3
4
5

3. 升级vue的版本

删除"vue-template-compiler"，因为在2.7中不再需要它
修改前：

"vue": "^2.6.11",
"vue-template-compiler": "^2.6.11"
1
2

修改后：

"vue": "^2.7.0"
1