1.开发环境
1.在vue项目外层查找vue.config.js文件 配置proxy代理
devServer: {
// 前端启动端口
port: 80,
proxy: {
// 代理监听第一台服务器路径前缀
'/way1': {
target: 'http://localhost:8081,
ws: true,
changeOrigin: true,
pathRewrite: {
'^/way1': '/way1'
}
},
// 代理监听第二台服务器路径前缀
'/way2': {
target: 'http://localhost:8082',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/way2': '/way2'
}
}
}
}
2.使用
在写请求时url('/way1/selectInfo')会调用到代理监听第一台服务器
2.部署环境
1.创建config.js
/**
* 初始化配置文件
* @param isProduce 是否是生产环境
*/
function initConfig(isProduce) {
// 基础配置
const $Config = { name: 'baseConfig', baseUrl: '', uploadFile: '', mock: false }
// 生产环境
if (isProduce) {
$Config.baseUrl = 'http://8.8.8.8:16656/way1/'
$Config.mock = true
$Config.loginUrl = "8.8.8.8:16656/way2/"
}
return {
$Config,
}
}
2.main.js引入方法
const config = initConfig(process.env.NODE_ENV === 'production')
Vue.prototype.$API = new Api(config.$Config)
Vue.prototype.$CFG = config.$Config
3.使用axios单独发送
axios({
method: 'post',
url: this.$CFG.loginUrl + 'user/Login',
data: formData,
headers: {},
})
.then(res => {})