-
添加环境变量和多环境地址
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",
}
//...
}