一个 vite 插件，基于 service worker 来自定义 hosts
lisongeee · lisonge · 2022-03-28 11:22:09 +08:00 · 2176 次点击这是一个创建于 977 天前的主题，其中的信息可能已经有所发展或是发生改变。
开发项目，需要来回在线上切换线上 /测试资源环境，同时也需要更改 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>
一般我们用 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>
 |
1
redtech 2022-03-28 12:19:38 +08:00
蛮好的 已 star 我有这种需求 今天抽空试用一下
|
 |
3
dusu 2022-03-28 13:48:29 +08:00 via iPhone
Whistle 不香吗 一行配置 hosts 的事 还能自动 https
|
 |
5
lisongeee OP @dusu 我的目标是尽量简单轻量，用户只需要在 vite.config.ts 里配置，然后随着 vite 一起启动一起关闭就行了。我之前也想过基于浏览器代理插件，然后代理服务器随着 vite 启动就行，但是我发现还要手动装插件，而且你的插件还得知道代理服务器地址，代理服务器还可能有多个，如果你的代理服务器关了，你还得手动关闭插件，或者插件一直轮询然后自动关闭。还有就是插件不能区分标签页，假如你的标签页 A 和标签页 B 都发起了一个 cdn.img.com 的请求，它的 header 没有 Origin 和 Referer ，请问 Whistle 如何给这两个请求配置不同的 host ？我承认 Whistle 综合来讲比这个小小的插件强大，但是各有优缺点，根据场景选择即可。
|
 |
6
musi 2022-03-29 09:21:02 +08:00
我们是直接开发了一个浏览器插件，由插件去做一次转发
|
|
9
lisongeee OP |
Select Language