Vue.js项目访问localhost无法加载，Chrome提示拒绝连接的原因是什么？

• 未启动Vue开发服务
  启动调试前需先在项目根目录终端执行对应启动命令，Vue CLI创建的项目执行npm run serve，Vite创建的项目执行npm run dev，等待终端输出服务启动成功的提示后再启动调试。
• 端口不匹配
  若8080端口被其他程序占用，Vue开发服务会自动切换为其他端口（如8081、8082），需核对终端输出的实际访问地址与launch.json中配置的"url": "http://localhost:8080"是否一致。若不一致可修改launch.json的url配置，或执行启动命令时强制指定端口：npm run serve -- --port 8080。
• host绑定异常
  部分项目的开发服务配置会将host绑定为127.0.0.1或本地局域网IP，未适配localhost解析。可尝试直接在Chrome地址栏输入http://127.0.0.1:8080测试访问，若可正常访问直接替换launch.json中的url配置即可。
• 本地网络规则拦截
  防火墙、系统代理、VPN类软件可能会拦截本地端口访问请求，可临时关闭相关软件后再测试访问。
• 调试配置错误
  若项目源码存放在根目录的src子文件夹下，需将launch.json中的webRoot配置修改为${workspaceFolder}/src，确保调试器可正确定位到源码路径。

内容的提问来源于stack exchange，提问作者SrihariSangeeth