asiox 多个baseurl_vue-cli3根据不同环境配置axios的baseUrl

下面我将介绍三种环境的baseUrl配置

开发环境、测试环境以及生产环境

在vue-cli3中，npm run serve时会把process.env.NODE_ENV设置为‘development’；

npm run build时会把process.env.NODE_ENV设置为‘production’；

因而，接下来我们要设置一个测试环境的process.env.NODE_ENV

--------------------

1、首先在package.json中设置ceshi,代码如下："ceshi":"vue-cli-service build --mode ceshi"

2、在根目录下新建 .env.ceshi文件，内容如下：

NODE_ENV = 'ceshi'

3、新建baseUrl.js,添加内容如下：

let baseUrl= ""; //这里是一个默认的url，可以没有

switch (process.env.NODE_ENV) {

case 'development':

baseUrl = "http://localhost:3000/"  //开发环境url

break

case 'ceshi':  // 注意这里的名字要和步骤二中设置的环境名字对应起来

baseUrl = "http://localhost:3000/"  //测试环境中的url

break

case 'production':

baseUrl = "http://106.13.94.82:3000"  //生产环境url

break

}

export default baseUrl;

4、axios中引入文件并使用

import axios from 'axios';

import baseUrl from './baseUrl '

let instance = axios.create({

baseURL: baseUrl,

timeout: 5000,

headers: {

'Content-Type': 'application/x-www-form-urlencoded',

},

transformRequest: [function (data) {

return data;

}],

transformResponse: [function (data) {

return data

}],

auth: {},

responseType: 'json',

maxContentLength: 5000,

validateStatus: function (status) {

return status >= 200 && status < 300; // default

},

// showMessage:false

})

现在使用npm run serve就是开发环境的url      npm run build就是生产环境的url   npm run ceshi就是测试环境的url