问题：

最近在业务开发中遇到一个问题，问题是这样的，当前有一个主项目和一个子项目，主项目通过微前端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不会自动尝试下一个可用端口，而是共用一个端口

总结：

在遇到问题时，要多多去猜，去想各种可能，并且最重要的是去尝试各种可能，还要加上积极去翻阅官方文档，问题一定会得到解决的；哪怕不能解决，那也会在尝试中，学到很多东西

原文链接：https://juejin.cn/post/7319699173740363802 作者：进阶的鱼