Vue CLI项目的模式和环境变量笔记

模式

一个 Vue CLI 项目有三个模式:

  • development 模式用于 vue-cli-service serve
  • test 模式用于 vue-cli-service test:unit
  • production 模式用于 vue-cli-service buildvue-cli-service test:e2e

可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量:

vue-cli-service build --mode development  # 对应根目录的.env.development文件

运行vue-cli-service命令时:

  • 1.从环境文件(env文件)读取环境变量;
  • 2.看文件内部是否包含 NODE_ENV变量,不包含的话将取决于模式:在 production 模式下被设置为 "production",在test模式下被设置为 "test",默认则是 "development"。

NODE_ENV 会是 "development""production""test" 中的一个。具体的值取决于应用运行的模式【即运行的命令,比如打包就是生产,运行就是开发】。

运行 vue-cli-service build 命令时,NODE_ENV 始终设置为 "production" 【production 模式用于 vue-cli-service build

环境变量

项目根目录中放置下列文件来指定环境变量:

// .env.[mode] 比.env 有更高的优先级,同名变量---前者覆盖后者
.env     # 在所有的环境中被载入【会被合并,合并到其他模式,是公共的env】
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

一个环境文件只包含环境变量的“键=值”对:

注意:只有 NODE_ENVBASE_URL 和以 VUE_APP_开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

.env环境文件是通过运行 vue-cli-service 命令载入的,因此环境文件发生变化,你需要重启服务。

NODE_ENV=development
BASE_URL=/app # BASE_URL 和 vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径。
VUE_APP_API_URL=https://xxx

在代码中使用环境变量

# process.env.[env文件的变量名]
console.log(process.env.VUE_APP_API_URL);   // https://xxx

项目中运用

我们平时项目中比如有开发环境、测试环境、生产环境、UAT环境,我们就可以如下设置:在根目录下放置下列文件

image.png

# SIT是集成测试、UAT是验收测试(应该是软件测试术语)
.env.dev: NODE_ENV=development   # 用于开发环境配置
.env.sit: NODE_ENV=production    # 测试环境配置
.env.uat: NODE_ENV=production    # 测试环境配置
.env.prod: NODE_ENV=production   # 生产环境配置

image.png

或者
image.png

对上图的额外解释

npm run build:test (run 后面执行的是script 中的key)

如何向 npm 执行的脚本传参数?
例如:build 执行test 编译,可以这样写npm run build -- --mode sit;就会在执行的脚本后面加这么一个参数。(向 npm 脚本传入参数,要使用--标明 ,后面的--mode sit是参数)

以上参考官方文档记录笔记

你可能感兴趣的:(Vue CLI项目的模式和环境变量笔记)