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

打包完成之后，放到服务器上，就会自动加载不同的接口地址。