原创 寻找光_sxy 2025-01-04 09:01 重庆
点击关注公众号，“技术干货”及时达！
点击关注公众号，“技术干货” 及时达！
问题：
最近在业务开发中遇到一个问题，问题是这样的，当前有一个主项目和一个子项目，主项目通过微前端wujie来嵌套这个子项目，其中呢为了方便项目之间进行通信，所以规定该子项目的端口号必须为5173，否则通信失败，但是这时候发现一个问题，当我启动了该子项目后:
该项目的端口号为5173，但是此时我再次通过vite的官方搭建一个react+ts+vite项目：npm create vite@latest react_demos -- --template react-ts，之后通过npm run dev启动项目，发现端口号并没有更新:
这是什么原因呢？
寻因：
查阅官方文档，我发现:
那么我主动在vite.config.ts中添加这个配置：
正常来说，会出现这个报错：
但是此时结果依然为：
我百思不得不得其解，于是再次查阅官方文档：
我寻思这也与文档描述不一致啊，于是我再次尝试，思考是不是
vite版本号的问题，两个项目的版本号分别为：
我决定创建一个4版本的项目npm create vite@^4.1.4 react_demos3 -- --template react-ts
结果发现，还是有这个问题，跟版本号没有关系，于是我又耐心继续看官方文档，看到了这个配置：
我抱着试试的态度，在其中一个vite项目中添加这个配置：
发现，果然是这个配置的锅，当其中一个项目host配置为0.0.0.0时，vite不会自动尝试更新端口号
难道vite的端口监测机制与host也有关？
结果：
不甘心的我再次进行尝试，将两个项目的host都设置成：
vite会自动尝试更新端口号
「原来如此，vite的端口号检测机制在对比端口号之前，会先对比host，由于我的微前端项目中设置了host，而新建的项目中没有设置host，新建的项目host默认值为localhost对比不成功，vite不会自动尝试下一个可用端口，而是共用一个端口」
总结：
在遇到问题时，要多多去猜，去想各种可能，并且最重要的是去尝试各种可能，还要加上积极去翻阅官方文档，问题一定会得到解决的；哪怕不能解决，那也会在尝试中，学到很多东西
点击关注公众号，“技术干货” 及时达！
