V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lisongeee
V2EX  ›  分享创造

一个 vite 插件,基于 service worker 来自定义 hosts

  •  
  •   lisongeee ·
    lisonge · 2022-03-28 11:22:09 +08:00 · 1892 次点击
    这是一个创建于 731 天前的主题,其中的信息可能已经有所发展或是发生改变。
    开发项目,需要来回在线上切换线上 /测试资源环境,同时也需要更改 host 。

    一般我们用 SwitchHosts 来管理,每次切换环境的时候,手动点一下规则,而且是全局的,如果你有两个标签页,一个线上一个测试,其中一个资源必定无法使用。

    这个插件的原理就是 service worker ,可以拦截当前标签页所有请求(websockt 和其他 worker 内部请求除外),包括图片,视频,然后把这些请求的 url 更改

    然后发送给本地服务器,本地服务器再使用内部配置好的自定义 dns ,然后返回给标签页

    这样一来,每个标签页都有独立的 hosts ,测试环境和线上环境 就不冲突了

    当然也有一些缺点,比如 devtool network log 会有两条记录,但是 worker 的前面会有一个 icon ,还是明显能区分的

    你的 测试环境 必须支持 service worker ,要么是 https ,要么 host 是 127.x.y.z 或者 localhost

    目前还在改进中,还有一些功能在开发,比如转换后的请求也可以配置 proxy

    欢迎大家提意见,球球给个 star 吧

    <https://github.com/lisonge/vite-plugin-switch-hosts.git>
    11 条回复    2022-03-29 09:59:46 +08:00
    redtech
        1
    redtech  
       2022-03-28 12:19:38 +08:00
    蛮好的 已 star 我有这种需求 今天抽空试用一下
    lisongeee
        2
    lisongeee  
    OP
       2022-03-28 13:34:21 +08:00
    @redtech 哈哈,可以
    dusu
        3
    dusu  
       2022-03-28 13:48:29 +08:00 via iPhone
    Whistle 不香吗 一行配置 hosts 的事 还能自动 https
    lisongeee
        4
    lisongeee  
    OP
       2022-03-28 14:08:27 +08:00
    @dusu 呃呃,也可以,但是这两场景都不一样,对标的问题也不太一样。
    lisongeee
        5
    lisongeee  
    OP
       2022-03-28 14:23:23 +08:00
    @dusu 我的目标是尽量简单轻量,用户只需要在 vite.config.ts 里配置,然后随着 vite 一起启动一起关闭就行了。我之前也想过基于浏览器代理插件,然后代理服务器随着 vite 启动就行,但是我发现还要手动装插件,而且你的插件还得知道代理服务器地址,代理服务器还可能有多个,如果你的代理服务器关了,你还得手动关闭插件,或者插件一直轮询然后自动关闭。还有就是插件不能区分标签页,假如你的标签页 A 和标签页 B 都发起了一个 cdn.img.com 的请求,它的 header 没有 Origin 和 Referer ,请问 Whistle 如何给这两个请求配置不同的 host ?我承认 Whistle 综合来讲比这个小小的插件强大,但是各有优缺点,根据场景选择即可。
    musi
        6
    musi  
       2022-03-29 09:21:02 +08:00
    我们是直接开发了一个浏览器插件,由插件去做一次转发
    lisongeee
        7
    lisongeee  
    OP
       2022-03-29 09:49:38 +08:00
    @musi 这就是 Whistle 的工作模式
    musi
        8
    musi  
       2022-03-29 09:51:37 +08:00
    @lisongeee #7 whistle 是单独的代理服务器,我的意思是直接用浏览器插件做域名重定向,不经过任何的代理服务器
    lisongeee
        9
    lisongeee  
    OP
       2022-03-29 09:54:09 +08:00
    @musi 我记得浏览器插件只能修改 header ,不能修改 body ,还有你说的是域名重定向是 get a.com/path -> get b.com/path
    musi
        10
    musi  
       2022-03-29 09:55:45 +08:00
    @lisongeee #9 是的,只是用来切换资源地址,也用不到修改 body 这一层
    lisongeee
        11
    lisongeee  
    OP
       2022-03-29 09:59:46 +08:00
    @musi 哦哦我懂了,我的是 a_com/path -> location_origin/__vite_proxy/a_com/path , 然后在本地测试服务器里请求 a_com/path ,但是使用 vite.config.ts 里的 dns ,比如配置 a.com->1.1.1.1 或者 a.com->b.com
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5380 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 01:32 · PVG 09:32 · LAX 18:32 · JFK 21:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.