vue根據不同的環境使用不同的接口地址

1. 在根目錄下新建一個js文件夾。

目錄結構如下：

2. 新建setBaseUrl.js文件

在js文件夾下添加setBaseUrl.js文件，內容如下：

let baseUrl = "";
let allUrls = {};
let nodeEnv = process.env.NODE_ENV;
switch (nodeEnv) {
  case 'development':
    baseUrl = 'http://192.168.161.186:8080/DLCPManager';
    break;
  case 'test':
    baseUrl = 'http://192.168.171.193:8080/DLCPManager';
    break;
  case 'production':
    baseUrl = 'https://datalabel.echargenet.com/api';
    break;
  default:
    baseUrl = 'https://datalabel.echargenet.com/api';
}
allUrls = {
  "baseUrl": baseUrl
}

export default allUrls;

development是開發環境，test是測試環境，production是生產環境。

3. 在main.js中引入

在main.js中添加如下內容：

import allUrls from './js/setBaseUrl';
axios.defaults.baseURL = allUrls.baseUrl;

allUrls.baseUrl就是接口地址；

4. 修改package.json文件

添加打包不同的環境的指令。
在package.json中scripts下添加如下內容：

  "dev": "vue-cli-service build --mode dev",
  "test": "vue-cli-service build --mode test"

5. 修改README.md文件

修改README.md文件，添加說明文檔。
在README.md中添加如下內容：

6. 打包

• 在生產環境下打包：

npm run build

• 在測試環境下打包：

npm run test

• 在開發環境下打包：

npm run dev

打包完成之後，放到服務器上，就會自動加載不同的接口地址。