模式
一个 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是参数）
以上参考官方文档记录笔记
网友评论