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

[lisongeee]

开发项目，需要来回在线上切换线上 /测试资源环境，同时也需要更改 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>

[redtech]

蛮好的 已 star 我有这种需求 今天抽空试用一下

[lisongeee]

@redtech 哈哈，可以

[dusu]

Whistle 不香吗 一行配置 hosts 的事 还能自动 https

[lisongeee]

@dusu 呃呃，也可以，但是这两场景都不一样，对标的问题也不太一样。

[lisongeee]

@dusu 我的目标是尽量简单轻量，用户只需要在 vite.config.ts 里配置，然后随着 vite 一起启动一起关闭就行了。我之前也想过基于浏览器代理插件，然后代理服务器随着 vite 启动就行，但是我发现还要手动装插件，而且你的插件还得知道代理服务器地址，代理服务器还可能有多个，如果你的代理服务器关了，你还得手动关闭插件，或者插件一直轮询然后自动关闭。还有就是插件不能区分标签页，假如你的标签页 A 和标签页 B 都发起了一个 cdn.img.com 的请求，它的 header 没有 Origin 和 Referer ，请问 Whistle 如何给这两个请求配置不同的 host ？我承认 Whistle 综合来讲比这个小小的插件强大，但是各有优缺点，根据场景选择即可。

[musi]

我们是直接开发了一个浏览器插件，由插件去做一次转发

[lisongeee]

@musi 这就是 Whistle 的工作模式

[musi]

@lisongeee #7 whistle 是单独的代理服务器，我的意思是直接用浏览器插件做域名重定向，不经过任何的代理服务器

[lisongeee]

@musi 我记得浏览器插件只能修改 header ，不能修改 body ，还有你说的是域名重定向是 get a.com/path -> get b.com/path ？

[musi]

@lisongeee #9 是的，只是用来切换资源地址，也用不到修改 body 这一层

[lisongeee]

@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