接口环境设置

• 开发上线的不同阶段，需要不同的配置

• 不同的跨域方式，配置不同

• 打包的时候统一注入环境参数，统一管理环境，输出不同的版本包

  • 在scr目录新建一个env.js文件来配置不同的环境下，使用不同的参数

    let baseURL
    // 在node中有一个process.env.NODE_ENV进程，可以取到环境变量中的参数
    switch (process.env.NODE_ENV) {
      case 'development':
        baseURL = 'http://dev-xx-xxx.com/api'
        break
      case 'test':
        baseURL = 'http://test-xx-xxx.com/api'
        break
      case 'production':
        baseURL = 'http://xx-xxx.com/api'
        break
      default:
        baseURL = 'http://xx-xxx.com/api'
        break
    }
    
    export default {
      baseURL
    }
    

    • 在node中有一个process.env.NODE_ENV进程，可以取到环境变量中的参数
    • CORS跨域和jsonp跨域都可以使用此配置

  • 在package.json文件中新增测试打包，线上打包和本地运行时所需的环境

    "scripts": {
        "serve": "vue-cli-service serve --mode=development",
        "test": "vue-cli-service build --mode=test",
        "build": "vue-cli-service build --mode=production",
        "lint": "vue-cli-service lint"
      },
    

    • –mode= 后面的参数不能随意写，随意写会报错

  • 最后需要在main.js中导入env.js文件

    import env from './env'
    
    // 根据前端的跨域方式做调整
    axios.defaults.baseURL = '/api'
    // 根据环境变量获取不同的请求地址
    axios.defaults.baseURL = env.baseURL
    // 超时处理
    axios.defaults.timeout = 8000