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';
}