如何将Vue CLI2顺利升级到Vue CLI3的详细步骤？

本文共计1917个文字，预计阅读时间需要8分钟。

以下是对原文的简化

以Vue CLI 3.x版本升级后，更改项目目录结构所需的操作：

1.卸载并重新安装Vue CLI：`npm uninstall vue-cli -g && npm install -g @vue/cli`。注意：若使用Vue CLI 3，Node版本需升级至8.9及以上。

以下备忘升级至 Vue CLI 3.x 版本后，将项目目录改为新结构时所需做的一些改动。

1. 卸载与安装

npm uninstall vue-cli -g

npm install -g @vue/cli

注：若要使用 Vue CLI 3，需将 Node 版本升级至 8.9 及以上。

当使用 nvm 管理 node 版本时，可以使用如下方式切换至需求的 Node 版本：

# 安装 >= 8.9 的某个版本 nvm install 8.12.0 # 在当前 session 中使用该版本 nvm use 8.12.0 # 设置默认的 Node 版本 nvm alias default 8.12.0

2. 环境变量与多环境配置

2.1 环境变量

在 Vue CLI 2.x 中，如果需要定义环境变量，需要在 build/webpack.dev.conf.js 中加入：

plugins: [ new webpack.DefinePlugin({ 'process.xxx': "'some value'", }) ]

而在 Vue CLI 3.x 中，我们可以使用配置文件的方式便捷的进行配置：

在项目中新建 .env 文件，写入

VUE_APP_KEY=VALUE

即可在需要的地方使用 process.env.VUE_APP_KEY 调用了。