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
   })

    

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