-
什么是环境变量
- 环境变量相当于快捷键,比如你需要在命令行打开一个文件,你需要输入这个文件的路径,设置了环境变量,直接输入文件名就能打开。 什么是模式
- 模式不等于环境变量
- 一个模式可以包含多个环境变量
- .env文件增加后缀来添加模式
在项目中创建.env来指定环境变量
.env 全局默认配置文件,不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入,但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略.env.dev # 指定开发模式dev.env.prod # 指定生产模式prod.env.test # 指定测试模式test
注:.env.local 以local结尾的文件会被忽略
环境文件的优先级
特定模式的环境文件(.env.production)将会比一般环境文件(.env)的优先级高
# 环境
NODE_ENV = 'test'
# 接口地址
VUE_APP_BASE_API = '/api'
# 打包文件名
VUE_APP_DIR_NAME = 'test'
使用模式
1.根据环境不同,改变地址
const hostname = location.hostname
const = href = '';
if (hostname === 'test') {
href = 'http://test';
} else if (hostname === 'production') {
href = 'http://production'
} else {
href = 'http://other'
}
2.在package.json中配置模式
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode build",
"dev": "vue-cli-service serve --mode dev",
"test": "vue-cli-service build --mode test"
},
配置.env文件