vue配置模式和环境变量

什么是环境变量

环境变量相当于快捷键，比如你需要在命令行打开一个文件，你需要输入这个文件的路径，设置了环境变量，直接输入文件名就能打开。

什么是模式

模式不等于环境变量

一个模式可以包含多个环境变量

.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文件