在项目开发中我们需要配置环境变量,开发环境,生产环境和测试环境。在cli 2.0的版本中我们是通过在config文件夹进行配置的,vue/cli 3.0相对简单,只需要在项目根目录创建.env
文件即可。以下是环境对应文件名和命令
模式 | 对应npm命令 | 对应文件名称 |
development | server | .env.development |
production | build | .env.production |
test | test | .env.test |
注意: process.env.NODE_ENV
为默认变量,会自动设置为上边对应的模式名称
变量必须以VUE_APP_开头
被载入的变量将会被vue-cli-service的所有命令、插件、依赖可用。
自定义模式
现实总是残酷的,默认的三种模式也许并不能满足我们的所有使用场景,使用自定义模式可以很好地解决这个问题。
我们开始创建一个 alpha 模式
修改package.json
添加一行命令"alpha": "vue-cli-service build --mode alpha"
实际效果
{
"name": "",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve", //本地开发运行,会把process.env.NODE_ENV设置为development
"build": "vue-cli-service build", //默认打包模式,会把process.env.NODE_ENV设置为production
"alpha": "vue-cli-service build --mode alpha", //自定义打包模式,把process.env.NODE_ENV设置production
"lint": "vue-cli-service lint" }, "dependencies": { } }
添加.env.alpha文件
在项目根路径创建.env.alpha
文件,内容为
NODE_ENV = production
VUE_APP_URL=http://192.168.000.178/
测试
//在axios文件中引用接口地址
let config = {
baseURL : process.env.VUE_APP_URL,
timeout: 60 * 1000, // Timeout
showLoading: true,
};
现在各个环境就会自动引用自己环境内的变量啦,需要注意的是NODE_ENV的名字打包时为production,开发运行为development,否则会造成环境找不到对应的模式配置,打包出的项目体积也会巨大无比。