以下备忘升级至 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 中配置对 @ 符号的支持










