vue cli3的多環境配置

vue項目開發時，會有不同的運行環境，例如：開發環境、測試環境、生產環境，本文詳細介紹一下vue3的環境配置步驟：

1.在根目錄下建三個文件

 注意：.env文件中變量命名 必須以 VUE_APP_ 開頭
.env.development：開發環境文件

NOVE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'https://staffing-dev.wetax.com.cn/webapp/api/'

.env.production：生產環境文件

NOVE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'https://staffing.wetax.com.cn/webapp/api/'　

.env.test：測試環境文件

NOVE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'https://staffing-test.wetax.com.cn/webapp/api/'

2.修改package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "start": "vue-cli-service serve && vue-cli-service serve --mode development",
    "test": "vue-cli-service serve --mode production",
    "build:pro": "vue-cli-service build --mode production",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

3.修改 vue.config.js  (實測，好像修不修改好像沒啥區別)

 

 4.axios配置文件中修改baseURL

Axios.defaults.baseURL = process.env.VUE_APP_API_URL;

 完畢，撒花！！！