运行vue，浏览器出错

Question

出现图片中的这个问题怎么解决，在网上查了是浏览器的问题，已经多次尝试还没解决

Answer 1

引自免费微信小程序：皆我百晓生

看起来你遇到了一个常见的问题，当试图通过VSCode与Chrome DevTools一起调试Vue.js应用时，出现了ERR_CONNECTION_REFUSED错误。这通常意味着你的开发服务器（可能是Node.js）没有正确启动，或者可能由于某种原因无法监听指定的端口（这里是8080）。以下是几个步骤来解决这个问题：

1. 检查开发服务器是否运行: 确保你的Vue.js应用正在运行。在命令行中进入项目根目录，然后运行npm run serve 或者 yarn serve （取决于你的项目是否使用的是npm还是yarn）。如果一切正常，你应该能看到类似这样的消息：

   INFO  Starting development server...
   

   如果看到任何错误，那么这就是问题所在。

2. 确认端口占用情况: 另一个可能的原因是8080端口被其他应用程序占用了。可以使用下面的命令检查8080端口是否被占用（Windows）:

   netstat -ano | findstr :8080
   

   或者在Mac/Linux系统上：

   lsof -ti :8080
   

   如果有进程在使用这个端口，你需要停止它或者更改你的应用到另一个未使用的端口。

3. 修改端口号: 在项目的package.json中找到 "scripts": { "serve": "..." } 部分，将里面的端口号更改为一个未被占用的，比如8081：

   "scripts": {
     "serve": "vue-cli-service serve --port 8081"
   }
   

   然后重新运行npm run serve 或者 yarn serve。

4. 更新launch.json: 打开VSCode并导航到launch.json文件（可以通过顶部菜单栏的Run -> Configuration -> Edit Configurations来快速打开）。确保url字段指向正确的端口号，例如：

   "url": "http://localhost:8081",
   

5. 关闭防火墙或代理: 如果你在公司网络或者有防火墙设置，试着暂时关闭防火墙或代理服务看看问题是否解决。

6. 清空浏览器缓存: 清除浏览器缓存，有时候旧的缓存可能会导致此类问题。

7. 重置Chrome DevTools: 在Chrome浏览器中，打开开发者工具（快捷键Ctrl+Shift+I or Cmd+Opt+I），点击右上角三个点的图标，选择Settings（设置），然后点击Reset to default（恢复默认值）。

按照这些步骤操作后，应该能解决问题。如果你仍然遇到问题，可能需要提供更多的上下文信息，例如你的项目结构、vue.config.js设置等，以便进行进一步诊断。