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

模式

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

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-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_ENV，BASE_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是参数）

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