关闭

webpack 前后端分离开发接口调试解决方案,proxyTable解决方案

时间: 2018-12-10阅读: 1319标签: webpack

如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法,请查阅其文档。

在 localhost:3000 上有后端服务的话,你可以这样启用代理:

proxy: {
  "/api": "http://localhost:3000"
}


请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users。

如果你不想始终传递 /api ,则需要重写路径:

proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""} //后面可以使重写的新路径,一般不做更改
  }
} 


默认情况下,不接受运行在 HTTPS 上,且使用了无效证书的后端服务器。如果你想要接受,修改配置如下:

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
} 


有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。

函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径,来跳过代理请求。

例如:对于浏览器请求,你想要提供一个 html 页面,但是对于 API 请求则保持代理。你可以这样做:

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
} 


如果你使用的vue-cli开发 他同样提供了 proxyTable 和上面的操作一样

以下是我出于无奈改造的

const targetPath='http://172.16.3.48:8080';//服务器的地址 可以是www.xxx.com
const pathX='/*';//如果打包后接口地址为fwone-central/orderinfo/* 则pathX='/*' 如果是/orderinfo/* 则pathX=''
var keysArr=[
  pathX+'/orderinfo/*',
  pathX+'/company/*',
  pathX+'/person/*',
  pathX+'/person/*/*',
  pathX+'/oncall/*',
  pathX+'/Tr/*',
  pathX+'/calldetail/*',
  pathX+'/customernotification/*',
  pathX+'/customernotification/*/*/*',
  pathX+'/sys/*',
  pathX+'/sys/*/*',
  pathX+'/invoice/*',
  pathX+'/contractservicedetails/*',
  pathX+'/customercomplain/*',
  pathX+'/callreminder/*',
]
for(let i=0;i<keysArr.length;i++){
  config.dev.proxyTable[keysArr[i]]={
    target:targetPath,
    secure: false,
    changeOrigin: true,
  }
}
console.info(Object.keys(config.dev.proxyTable))
module.exports= config


我先说一下我为什么这么做,我们本地开发直接常规的写法没有问题但是如果部署到测试服务器上,一个tomcat跑多个项目我们后端是用文件夹来区分项目的,但是这个区分后似乎会影响接口路径 ,也就是说



原本是‘/’ 现在变成了 ‘/fwone-central’

我一开始以为这样也很好解决 我直接把target 改成 'http://172.16.3.48:8080/fwone-central'  接口报404

然后

 '/fwone-central/orderinfo/*': {
        target:'http://172.16.3.48:8080',
        secure: false,
        changeOrigin: true,

      },
//这样又ok 其实我看请求的地址是一样一样的


所以我无奈做了上面的修改 也许你不知道我在说什么,因为你没有遇到过,或者你永远遇不到.

当然上面的问题还有坑 当你在请求数据的时候,原本是这样的没有问题 ,但是你部署后路径改变了,这个请求路径也就无效了

 axios({
            method: 'get',
            url:'/orderinfo/count' ,
            params: {orderStateIds: [1, 2, 3, 4, 5, 6, 7, 8]}
          }).then(function (r) {
            if (r.data.code == 0) {
              //...
            }
          });
        }).catch(function (error) {
          console.error(error);
        })


解决办法,是有流传已久的绝对路径和公共路径

 
 window.localPath='http://localhost:8087/fwone-central' //他可以定义在首页随时顺着项目路径修改
axios({
            method: 'get',
            url:localPath+'/orderinfo/count' ,
            params: {orderStateIds: [1, 2, 3, 4, 5, 6, 7, 8]}
          }).then(function (r) {
            if (r.data.code == 0) {
             //...
            }
          });
            cb()
        }).catch(function (error) {
          console.error(error);
        })


还有最后一点需要注意路径改变了打包后的静态资源路径也得改变 所以在vue-cli config.js index.js

 build: {
   
    assetsSubDirectory: 'statics/mobile', //这是将静态资源打包到指定的文件夹下
    assetsPublicPath:'/fwone-central/', // 这是静态资源的路径
    
  },

 

当然上面的绝对路径可以通过axios的全局配置来设置。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1536

关闭

webpack Code Splitting浅析

Code Splitting是webpack的一个重要特性,他允许你将代码打包生成多个bundle。对多页应用来说,它是必须的,因为必须要配置多个入口生成多个bundle;对于单页应用来说,如果只打包成一个bundle可能体积很大,导致无法利用浏览器并行下载的能力

用不同语言语法编写webpack配置文件

webpack配置文件默认情况下为webpack.config.js,即用原生js语法书写的配置文件。然而,在我们的项目中,有时候是使用的是其他语言语法进行编程,例如:es6、coffeeScript、typeScript等语言语法。

让IDE识别webpack的别名alias

许多项目脚手架默认就会把src目录添加一个@别名,项目中实际引入时,虽然可以精简路径,但也带来一个很麻烦的问题:IDE无法识别这些别名,因此导致无法自动完成路径、无法识别引用资源的输出、出现不必要的告警等情况。

我当初为什么写webpack_Tobias Koppers

Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。

Webpack有哪些常见的Loader?

这里其实没什么太大意义,无非是想请你们亲自去看看自己项目到底用了哪些loader而已, 下面简单列出一些。style-loader 将css添加到DOM的内联样式标签style里

webpack系列之loader及简单的使用

webpack本身只能打包Javascript文件,对于其他资源例如 css,图片,或者其他的语法集比如jsx,是没有办法加载的。 这就需要对应的loader将资源转化,加载进来。

Vue中使用webpack别名的方法

Vue中使用webpack别名的方法,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况。而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径。那么该怎么办呢?

深入理解Webpack核心模块Tapable钩子[同步版]

tapable是webpack的核心依赖库 想要读懂webpack源码 就必须首先熟悉tapable。ok.下面是webapck中引入的tapable钩子 由此可见 在webpack中tapable的重要性

与Grunt、Gulp和Parcel相比,Webpack的强大之处

首先,Grunt和Gulp只能将一些CSS和JS文件分别压缩合并成单个文件,当然也具有一些编译功能,比如Less和Sass的编译、ES6到ES5的编译等等。但是Webpack不仅具有它们所具备的这些编译压缩合并功能,

webpack 构建多页面应用初探

如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题。网上也给出了很多的例子,很多想法。猛一看,觉得有那么点儿意思,但仔细看也就那样。使用webpack这个构建工具,可以使我们少考虑很多的问题。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!