1. 配置vue.config.js
devServer: {
host: ‘0.0.0.0‘,
port: port,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://172.16.13.94:9005`,
// target: `http://localhost:9005`,
changeOrigin: true,
pathRewrite: {
[‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘
}
},
//匹配/list-api开头的请求
[process.env.VUE_APP_LIST_API]: {
//目标服务器,代理访问到 http://172.16.13.202:8080/BESTest
target: `http://172.16.13.202:8080/BESTest`,
// 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,
// 并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
changOrigin: true, //开启代理
pathRewrite: {
// 会将 /list-api 替换为 ‘‘,也就是 /list-api 会移除,
// 如 /list-api/db.json 代理到 http://172.16.13.202:8080/BESTest/db.json
// ‘^/list-api‘:"",
["^" + process.env.VUE_APP_LIST_API]: ‘‘
}
},
},
disableHostCheck: true
},
2. 配置 env
VUE_APP_BASE_API = ‘/dev-api‘
VUE_APP_LIST_API = ‘/bes‘
3.配置api
import axios from ‘axios‘
axios.defaults.headers[‘Content-Type‘] = ‘application/json;charset=utf-8‘
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: process.env.VUE_APP_LIST_API,
// 超时
timeout: 10000
})
/**
* @param query
*/
export function getLightList(query) {
return service({
url: ‘/api/v1.0/getLightList‘,
method: ‘get‘,
params: query
})
}
vue添加多axios 多环境请求