设置一个代理服务器,使用proxyTable配置地方:
1.项目文件目录的conf文件夹下的index.js
build /dev 都可设置为一致
dev: {
env: require('./dev.env'),
port: 80,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/apis': {
target: 'http://localhost:15/',// //远程接口访问地址
secure: false,// secure: true, //如果是https接口,需要配置这个参数
changeOrigin:true,
pathRewrite: {
'^/apis': '' //需要rewrite重写的,
}
}
},
cssSourceMap: false
}
第二步 找到main.js 配置系统级别的访问
//我把axios ,及apis 做了封装到js文件
import func from './config/func';
Vue.prototype.func = func;
func.js的具体内容如下
import axios from "axios";
axios.defaults.baseURL = "/apis";
export default {
ajaxGet(api, cb) {
axios.get(api)
.then(cb)
.catch(err => {
console.log(err);
})
},
ajaxPost(api, post, cb) {
axios.post(api, post)
.then(cb)
.catch(err => {
console.log(err);
})
}
}
第三步 调用
调用时直接调用后端接口地址:本人后端接口地址就是:apis/user/checkName 参数是login。
this.func.ajaxPost('apis/user/checkName','login='+this.name,res =>{
console.log(res);
if(res.data.valid==true){
this.$router.push('/loginSuccess')
}else{
this.$throw('登录异常',1000);
}
})
打开浏览器调试模式可以看到我的请求地址是:
但是实际访问的是:http://localhost:15/apis/user/checkName
本文是本人在项目中配置的方式如对您没有帮助 请忽略