在项目运行的时候吗,不可缺少就是的设置反向代理的
详细的文档 http-proxy-middleware
下载的官方的脚手架打开文件的build/dev-server.js
搜索:(这个插件官方已经下载好了,只需要简单的配置一下就好的)
var proxyMiddleware = require('http-proxy-middleware')//获取插件
添加下列代码:
方法一:
app.use('/api', proxyMiddleware({
target: 'http://xxxx.weddingee.com/', //域名的配置,
changeOrigin:true,//通过设置changeOrigin:true 开启代理
}));
修改脚手架的东西后一定要npm run dev
全局配置axios的方法:
npm install axios -D
main.js
import axios from 'axios'
// Vue.prototype.axios = axios //组件调用this.axios.get(...)
// Vue.prototype.$ajax = axios //换个名字 组件调用this.$ajax.get(...)
window.axios = axios; //组件中调用 axios.get(...)
组件中调用的方法:
getData(){
axios.get('/api/work/home') //api是前端自己添加的
.then(function (res) {
console.log(res);
})
.catch(function (error) {
console.log(error);
});
}
方法二:config/index.js
proxyTable: {
firstProxy: {
target: 'http://dingee.com/',
filter(pathname, req) {
//console.info('firstProxy',req)
const isApi = pathname.indexOf('/api') == 0;
const ret = isApi;
return ret;
},
changeOrigin: true,
},
}
修改脚手架的东西后一定要npm run dev
调用的方法省略。