前后端项目开发过程中热更新问题反馈

[NateRobinson]

跟张晗同步之后得知：出现上面情况的原因是，现在的 vite 的前后端共用了一个端口。当我更新 server 代码的时候，由于现在默认端口号不是固定的，server 会自动 reload 然后随机一个另外的端口号。server 会热更新成功。

但是会有一个副作用：前端并不知道这个端口已经变了，也就出现了上面截图的那个情况，前端的控制台不停的报错，然后同时前端的热更新也会失效。此时必须要手动刷新浏览器，前端的热更新才会恢复回来。

针对这个情况，张晗给了两个方案：

方案1：固定这个端口号

这样就不会出现这个前端热更新失效加报错的问题，不过会有另外一个副作用，就是前端页面在 server 代码编辑保存的时候，会自动的 reload，我觉得也很诡异。

站在开发角度，我编辑的是后端代码，你不应该给我刷新前端页面。

方案2：前后端单独分配端口号

这个没有验证，不过可以请 @LancelotLewis 补充

[LancelotLewis]

方案2：前后端单独分配端口号

之前就是前后端各一个端口号，但所有到后端的请求需要在前端代码中配置 proxy 才能实现，现在的方案其实是在原来的某些痛点上进行改进的方案，现在方案的优点是无需关心 proxy 的设置，并能解决原有 proxy 方案中对 ws 的转发有问题的情况

[LancelotLewis]

方案1 最优的预期是达到与 next.js，nuxt.js 一样的效果，更改后端代码也无需重启后端服务器，这个一直没找到合适的方案去解决，现在的效果算是一个有瑕疵的版本，但这个缺点对我个人来说是可以接受的，因为：

1. 它只在开发阶段出现
2. 大部分时候我修改了后端代码，页面本身就需要刷新一次

[NateRobinson]

但是作为开发者的角度会觉得之前的版本没有影响我开发，但是现在的版本已经影响我开发流程了。

[wangshijun]

现在的 vite 的前后端共用了一个端口。当我更新 server 代码的时候，由于现在默认端口号不是固定的，server 会自动 reload 然后随机一个另外的端口号。server 会热更新成功。

@LancelotLewis 给 vite 固定下端口号是不是就行了？

[LancelotLewis]

固定端口号后就是 nate 上面提到的 方案一，这个目前可以通过传入参数自行设置

其实这个问题的本质在于后端代码如何实现不重启服务的热更新，当前时代，各类前端框架的开发体验已经足够好了，更改代码无需重启服务器，变更就能自动生效。
但后端项目，绝大多数还是依赖与 nodemon 类似的工具重启整个服务端项目实现变更生效，而到我们这边的上下文中，后端重启会导致前端服务也重启，就会产生上述描述的不适应的情况

关于后端项目更改代码热更新之前也一起调研过，有一个可行的方案，但其方案本身也是通过 vite 来运行后端代码实现的 https://github.com/axe-me/vite-plugin-node ，这就导致了无法在同一个项目内拥有两个不同的 vite 配置文件，所以至今还没找到一个更好的方案

BTW，sveltekit 1.0 已经出了，其本身也是基于 vite 的开发服务器，说不定将来可以从这里获得一些灵感