先找到配置文件的config.js里面的index.js修改proxyTable的值,修改为:
proxyTable: {
'/Bapi': {
target: 'http://40.00.100.100:3002',//设置你调用的接口域名和端口号 别忘了加http
secure: false,
changeOrigin: true,
pathRewrite: {
'^/Bapi': 'http://40.00.100.100:3002' // 这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
}
},
修改完index.js后再修改dev.env.js,修改为:
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
BEST_URL:'"/Bapi"',
NODE_ENV: '"development"'
})
修改完后我们再通过cnpm install --save axios安装插件,接着在src目录下创建server目录,在server目录下建server.js,在server.js里面:
import Axios from 'axios'
export default {
get(urlStr,resObj) {
var url = process.env.BEST_URL+urlStr;
//var url =urlStr;
return Axios.get(url, {
params: resObj,
})
},
post(urlStr,resObj) {
var url = process.env.BEST_URL+urlStr;
//var url =urlStr;
return Axios.post(url, resObj)
}
}
然后再mian.js引入:
import Axios from 'axios'
import http from '@/server/server.js'
Vue.prototype.$http=http
最后在各组件间获取数据:
this.$http.post('/xx/xx/xx', {
obj:obj(参数)
}).then(data=> {
}).catch(error=> {
console.log(error);
});
最终请求接口的地址会是:(你的本地ip地址加端口或localhost)/Bapi/xx/xx/xx