首页 > 语言 > JavaScript > 正文

Vue 项目代理设置的优化

2024-05-06 15:19:57
字体:
来源:转载
供稿:网友

Vue 类的项目开发中项目结构基本都是类似于 Vue-cli 生成的方式,这种方式开发中,最常用到的模式是开启代理进行 mock 调试或远程调试,也就是使用了 Vue-cli 设置的配置 proxyTable 或者直接使用 Webpack-dev-server提供的 proxy 选项。它是采用了 http-proxy 库,所以具体配置可查看:

https://github.com/nodejitsu/node-http-proxy#options

利用配置的这些参数我们可以做更为灵活的配置,达到更好的效果

使用需求

假设我们本地开发目前以下几种状态:

本地开发,数据使用本地的 mock Server 涉及权限接口使用本地 mock 数据,其他全部使用指定的一台远程机器 涉及权限接口使用本地 mock 数据,其他数据分接口使用不同的远程机器 所有接口使用同一台远程机器

方案

先看下经典的proxyTable 写法:

proxyTable: { '/authui/': {  target: target,  changeOrigin: true }, '/vendor/': {  target: target,  changeOrigin: true }}

其中用到了 changeOrigin 字段,主要是用于改变请求的 header。细化下需求:

本地开发:target 指向 localhost 的某个端口即可。至于 host 的验证肯定是不需要的 部分本地,其他固定的一台远程机器:需要配置 localhost 和远程的地址,远程地址多半是需要验证 host 的 同二,但机器有多台:需要手动配置多台机器 同一台远程机器,此时机器可能要严格验证,即 IP 也必须使用域名,配置好系统 host 才可使用

说明:严格验证 host 和普通验证 host 区别主要在于严格验证时,请求的 url 必须是远程机器的域名,
不能直接修改请求的 header 的 host 实现,即必须在系统 host 层面配置好域名。

分析完成具体需求好,就开始准备实现的方式。原有开发方式是执行 npm run dev,如果我们需要在命令行层面添加配置,就需要设置为 npm run dev --param=paramvalue 的方式。对于使用 npm 的 script 脚本执行的命令,
它参数的获取无法通过 process.env 获得,而且通过 process.env.npm_config_paramName 的方式获取,
使用现成的命令行参数解析库也不是很方便,但为了省事,暂时还是使用 npm 自带的解析。

请求发起过程中需要以下几个参数:

host: 发起请求需要指向的 host,可能每台机器验证并不相同 port: 代理转发的端口 receiver: 用于 push 的远程地址,内包含了 ip 地址,为了省事,没有单独列出 ip 地址

然后定义代理请求自定义类型,用于配置:

local: 本地地址,即 localhost remote: 指定的远程机器 其他自定义类型:用于在配置文件中已经指定的其他类型 原版本的请求,如 'http://xxx' 或者 Object 类型的配置,此类代理永不处理
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选