1)为何要使用proxyTable
在VUE的这种项目里,一般前端用webpack进行开发与打包;
后端使用express ,koa等框架。
不管前端的代码是否与后端代码,物理上是否是同一个工程,不能逃避的是,前端在开发的时候,要调用后端的接口。
但开发与生产调用的后端地址不同: 开发时,是分别启动的服务与端口;生产状态时,前端的代码已经打包放在服务端的工程里一起发布,作为同一个工程的前端代码了。
所以 ,在开发状态下,前端代码调用后端的代码,一是存在调用地址的一不致;二是在调用服务端的ajax时,会有跨域的问题需要解决;
当然,在生产状态下,就没有什么问题了,一堆打好包的js,css,html放在服务端工程启动的服务里而已!
2)如何使用proxyTable
还是拿之前使用过的vue-cli举例。我们首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用,自然而然是要配置在dev里面:
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://www.abc.com', //目标接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/api' //重写接口
}
},
cssSourceMap: false
}
上面这段代码的效果就是将本地8080端口的一个请求代理到了http://www.abc.com这一域名下;
3)实战
拿mydoor,mydoor-dev ,mydoor-manage-dev来说明。
mydoor :koa工程,后端代码;
mydoor-manage-dev:后台管理的前端代码,所以调用后端代码的路由,都以 /manage/*开头;其它/ /login等,属于自身的路由调用;/manage/*用于ajax向后端调用。
webpack.dev.conf-》config/index.js里的 proxytable.
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'staticM',
assetsPublicPath: '/',
proxyTable: {
"/manage": {
target: "http://localhost:3000",
changeOrigin:true,
pathRewrite:{
'^/manage': '/manage'
}},
},我们只需要做一个代理,就可以完成了跨域及服务端代码的调用 !(通过axois);
其它的都是前端本身的route. 我们不要做代理!