前景

当前项目用户登录后的token存在localstorage中，目前分了三个子项目Ec、Manage、Passport 在部署时会将其部署在同一个域名下的不同路径上，即类似http://www.baidu.com/ec/#/,http://www.baidu.com/manage/#/,http://www.baidu.com/passport/#/ 因此部署后不同项目是能共享到localstorage的，但是本地开发时，vite一般是在不同端口上启项目的，那localstorage就无法共享了。

解决

直接仿照部署时的逻辑，服务器上其实也是用nginx代理，将不同路径反向代理到不同端口上运行的docker镜像 。 那么我们是不是本地也能用nginx代理来解决？但其实都不用nginx， vite的开发服务器就能帮我们进行代理，那直接通过vite中的server.proxy吧，它的配置规则和nginx的配置规则很相似，具体可以看我的另外一篇文章Nginx中proxy_pass规则。

首先给各个子项目添加一个前缀，方便vite代理捕捉到

正常我们的子项目是直接运行在http://localhost:8080/，我们需要将子项目改造成运行在http://localhost:8080/msip/xxx .

需要在vite.config文件中加一个base字段。例如我想让manage项目运行在http://3002/msip/manage/那么base字段的值就是'/msip/manage'

将某个项目作为根项目，在其端口上代理其他子项目

因为我的解决办法是用vite代理服务器来解决，因此只能在某个项目端口上代理其他项目。如果用nginx的话 其实直接把所有项目代理到一个没用的端口即可。

那么我这里就用passport项目来作为总代理，因为一般本地开发都需要先启登录页项目。

只需要在passport项目的vite.config.ts文件中进行如下配置

这样以后就能在同一端口上“启动”三个项目了，就能实现token共享了。

后续问题

改造完后我就做别的项目去了，结果突然有一天同事告诉我，怎么没法热更新了。

于是我习惯性打开passport项目试了下发现可以，结果他们说ec和manage项目无法热更新。得，一看就是代理有问题。

我们知道热更新实际是一个ws连接，看起来似乎是ws连接没有被代理，导致热更新无法触发。于是问了一番ai+查阅文档作出以下修改

修改 Passport 项目的 Vite 配置：

同时，需要在 EC 和 Manager 项目的配置中添加 HMR 配置：

ok这样就能把热更新也顺利代理过去了。

Next

整理一下各种配置代理