1、作用:在vue项目中,使用.env文件来加载不同环境下面的请求域名、环境变量等。
2、配置(以.env.test文件为例):
① 在项目根目录下新建名称 .env.test
的文件
② 文件内容如下:
变量的名称必须以
VUE_APP_
开头
# just a flag
ENV = 'test'
# base api
#VUE_APP_BASE_API = '/api'
#VUE_APP_BASE_API = 'http://192.168.XXX.XXX:8080'
#VUE_APP_BASE_API = 'http://192.168.XXX.XXX:80/'
#VUE_APP_BASE_API = 'http://XXX.XXX.XXX.XXX'
VUE_APP_BASE_API = 'http://XXX.XXX.XXX.XXX'
添加下面的代码在配置文件中,可以用来提高热更新的速度:
VUE_CLI_BABEL_TRANSPILE_MODULES = true;
③ 获取变量:process.env.VUE_APP_XXX
3、加载:
.env.development
:用于本地及开发环境,仅在开发时加载(名称固定)。.env.production
:用于生产(正式)环境,仅在生产环境加载(名称固定)。.env.test
:用于测试环境,仅在测试环境加载(自定义名称)。
- 命令配置:
在
package.json
中写入(主要是在原有的命令后添加--mode 名称
)
{
"name": "vue3_work",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"serve-test": "vue-cli-service serve --mode test",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "vue-cli-service build --mode test"
}
}