vue-cli4.0配置项目的不同环境域名

用 test、preview、production分别表示测试，预览，生产三种环境

修改 package.json 文件如下

“scripts”: {
“serve”: “vue-cli-service serve”,
“test”: “vue-cli-service build --mode test”, //测试
“preview”: “vue-cli-service build --mode preview”, //预览
“build”: “vue-cli-service build --mode production”, //生产
“lint”: “vue-cli-service lint”
},
在项目根目录下新建 .env.test、.env.preview、 .env.production 文件，分别对应三个环境的配置文件，注意，名字要与 --mode 后面的名字分别对应

.env.test 代码如下

NODE_ENV=“test”
VUE_APP_BASE_URL=“测试环境域名”
.env.pre 代码如下

NODE_ENV=“preview”
VUE_APP_BASE_URL=“预览环境域名”
.env.prod 代码如下

NODE_ENV=“production”
VUE_APP_BASE_URL=“生产环境域名”
ok，这样环境就配置好了，分别用以下命令来打包不同环境的包就可以了

npm run test //测试
npm run pre //预发布
npm run prod //生产
另外需要说明一点的是，本地环境会默认从 .env.development 文件中读取配置

所以记得有需要记得新建一个然后存放配置

我的 .env.development 代码如下

NODE_ENV=“development”
VUE_APP_BASE_URL=“本地环境域名”

若在开发时使用了跨域代理，可以在main.js中增加判断，自动切换接口请求的域名

if (process.env.NODE_ENV ===‘production‘||process.env.NODE_ENV === ‘test‘) {//生产环境，测试环境
        axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;
} else {
    //serve 开发环境
    // axios.defaults.baseURL = ‘/api‘;
}

vue-cli4.0配置项目的不同环境域名

原文：https://www.cnblogs.com/xiaoliang-/p/12928941.html