Vue项目多环境访问地址配置

添加环境变量和多环境地址

src目录下新建const.js文件,并添加类似下面的配置

const env = {
  development: {
    API_BASE_ORIGIN: '/base',
    API_TEST_ORIGIN: '/test'
  },
  test: {
    API_BASE_ORIGIN: 'https://xx.xx.xx1',
    API_TEST_ORIGIN: 'https://xx.xx.xxx1'
  }
  production: {
    API_BASE_ORIGIN: 'https://xx.xx.xxx',
    API_TEST_ORIGIN: 'https://xx.xx.xx'
  }
}
export default env[process.env.VUE_APP_BUILD_ENV]

　　

development 开发环境地址配置
test 测试环境地址配置
production 生产环境地址配置
VUE_APP_BUILD_ENV 自定义环境变量（必须以VUE_APP_前缀开头）

封装请求中添加地址配置
src目录下新建axios文件夹，axios目录下新建index.js，文件内容如下

import axios from 'axios'
import envConst from '../const'
//请求拦截器
axios.interceptors.request.use(
  function (config) {
    //按照config.url判断具体请求地址
    if(config.url.split('/')[1].match(/(test1|test2)/)) {
       config.baseURL = envConst.API_TEST_ORIGIN
    } else {
       config.baseURL = envConst.API_BASE_ORIGIN
    }
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)
//响应拦截器
axios.interceptors.response.use(
   function (config) {
     //...
   })
)
export default axios

　　绑定自定义axios到$axios上

//按照地址引入axios请求
import axios from '../axios'
Vue.prototype.$axios = axios

　　

• 配置命令
  package.json文件中添加如下命令

• {
    //...
    scripts: {
      "serve": "cross-env VUE_APP_BUILD_ENV=development vue-cli-service serve --fix",
      "build-test": "cross-env VUE_APP_BUILD_ENV=test vue-cli-service build",
      "build": "cross-env VUE_APP_BUILD_ENV=production vue-cli-service build",
    }
    //...
  }