Vue CLI2升级至Vue CLI3的方法步骤

2020-06-12 21:18:38易采站长站整理

以下备忘升级至 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
调用了。注意,这里环境变量必须以
VUE_APP_
开头。

2.2 多环境配置

配置文件同样支持多环境,即

.env.development
文件表示
development
环境;
.env.production
文件表示
production
环境。

在使用

npm
命令时,可以通过指定
--mode xxx
来启用某一环境的环境变量。

注:

.env
文件为所有环境的公用环境变量。

2.3 本地多环境配置

在 Vue CLI 3 中,声明了对

.env.*.local
不进行 Git 版本控制。

对于一些无需上传到代码仓库的配置,可以使用这一方式。

3. 静态资源文件

Vue CLI 3.x 将默认资源文件根路径放到了

/public
目录下,而默认精简掉了 2.x 版本中的
/static
目录。因而之前放置于
/static
目录中的资源文件及其引用位置需要做些调整。

4. 在 WebStorm 中配置对 @ 符号的支持