vue cli3配置開發環境、測試環境、生產（線上）環境（一）

cli3創建vue項目是精簡版的少了build和config這2個文件，所以配置開發環境、測試環境、生產環境的話需要自己創建env文件。

需要注意2點：

1、cli2創建項目生成的config文件里的env文件是js后綴

2、cli3創建自定義env文件的話不需要js后綴

下面開始創建配置：

一、直接在你項目的根目錄創建三個文件（注意都沒有后綴，直接創建新文件）：.env.development （開發環境） .env.test（測試環境）.env.production（生產環境）

.env.development （開發環境）代碼如下：

VUE_APP_BASE_URL = 'http://www.development.com'

 .env.test（測試環境）代碼如下：

VUE_APP_BASE_URL = 'http://www.test.com'

.env.production（生產環境）代碼如下：

VUE_APP_BASE_URL = 'http://www.productioon.com'

創建以上3個文件是全局變量

二、可以在main.js中打印出當前環境的變量地址，默認打印結果是開發壞境地址：http://www.development.com

console.log(process.env.VUE_APP_BASE_URL);

三、更改package.json文件配置，重新啟動項目  npm run serve  就ok了

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test"
  },

npm run test 會打包一個test的文件，運行這個文件打印出來的地址就是：http://www.test.com

同理npm run build會打包一個build的文件，運行這個文件打印出來的地址就是：http://www.productioon.com

以上就是配置3個環境的全部流程了

如果要配置axios請求方法，請移步 vue封裝axios

axios封裝后只需要更改 vue封裝axios的第四部http.js文件

1.引入env文件

2.locahosts =  baseUrl就行了

import { baseUrl } from '../../process-env'; 
let localhosts = baseUrl; //請求的后台域名