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

时间:2020-05-21
本文章向大家介绍vue-cli4.0配置项目的不同环境域名,主要包括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';
}

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