vue项目 运行时出现It works！却不显示页面 问题解决方案

问题描述
运行一个vue项目时，一切正常，没有报错，但是点开网页链接后，显示空白页面，空白页面上有个It works！
如图所示

问题分析
It works！页面出现说明vue项目配置正常，但是无法显示页面，说明端口传输异常，很可能默认端口被别的进程占用，需要更换成闲置端口
问题解决
首先查看项目使用的端口

通过运行地址能够得知项目使用80端口，接下来需要更改这一端口
然后，需要找到设置端口的文件位置，我的项目中，设置端口的位置在vite.config.js文件中，其中设置了server的port
如图所示

也可以直接在项目中搜索对应的端口，找到设置端口的位置
如图所示

将port后的数字改成一个闲置端口
如图所示

我将原端口改为了1113，然后保存文件更改，再重新运行项目，可以看到项目运行的地址已经改变
如图所示

此时不再出现it works，而是成功加载页面