• 运行vue，浏览器出错

    关注 码龄 粉丝数 原力等级 -- 被采纳 被点赞 采纳率 m0_69233734 2024-05-20 20:11 采纳率: 65% 浏览 29 首页/ 编程语言 / 运行vue，浏览器出错 javascriptvue.jsnpm 出现图片中的这个问题怎么解决，在网上查了是浏览器的问题，已经多次尝试还没解决 收起 写回答 好问题 0 提建议 追加酬金 关注问题 微信扫一扫 点击复制链接 分享 邀请回答 编辑 收藏 删除 结题 收藏 举报 追加酬金 (90%的用户在追加酬金后获得了解决方案) 当前问题酬金 ¥ 0 (可追加 ¥500） ¥ 15¥ 20¥ 50¥ 100¥ 200 支付方式 扫码支付 二维码出错 点击刷新 支付金额 15 元 提供问题酬金的用户不参与问题酬金结算和分配 支付即为同意 《付费问题酬金结算规则》 结题 再想想 删除 再等等

    4条回答 默认 最新

    • 专家-赤兔[在线] 全栈领域优质创作者 2024-05-20 20:11
      关注

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

      看起来你遇到了一个常见的问题，当试图通过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设置等，以便进行进一步诊断。

      展开全部

      评论 编辑记录
    • 阿里嘎多学长 2024-05-20 20:11
      关注

      以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

      【您想要解决的问题】： 您遇到的问题是在运行Vue项目时，浏览器显示无法访问localhost:8080，并且VS Code的调试控制台显示无法读取Chrome的源映射，提示一个503错误。

      【图片内容】：

      1. 第一张图片显示了浏览器的错误信息，提示“localhost 拒绝了我们的连接请求”，并且提供了一些可能的解决步骤，比如检查网络连接、代理服务器和防火墙。
      2. 第二张图片是VS Code的调试视图，显示了launch.json配置文件的一部分，以及一个错误信息，指出无法读取Chrome的错误页面的源映射，具体是“chrome-error://chromewebdata/”的源映射。

      【问题出现原因】：

      1. 浏览器无法访问localhost:8080可能是因为本地服务器没有正确运行，或者端口8080被其他应用占用。
      2. VS Code调试控制台的错误可能是因为Chrome的调试协议出现了问题，或者是因为网络问题导致无法从Chrome获取源映射。

      【问题解决方案】：

      1. 确保您的Vue项目已经通过npm或yarn正确安装了依赖，并且没有出现依赖错误。
      2. 检查您的本地开发服务器是否正在运行。通常，Vue CLI项目可以通过执行npm run serve或yarn serve来启动。
      3. 如果服务器正在运行，检查端口8080是否被其他应用占用。如果是，您可以尝试更改Vue项目的配置，使用其他端口。
      4. 对于VS Code调试控制台的问题，尝试清除Chrome的缓存或者重启Chrome。
      5. 确保VS Code的调试配置是正确的，特别是launch.json文件中的配置。

      【提供代码】： 由于问题可能涉及多个方面，这里提供一个基本的检查和启动Vue项目的命令：

      # 安装依赖
npm install

# 启动开发服务器
npm run serve

      【代码运行方式】：

      1. 打开终端或命令提示符。
      2. 导航到您的Vue项目目录。
      3. 运行上述提供的命令。

      【代码预期运行结果】： 如果一切正常，您的Vue项目应该在浏览器中通过localhost:8080（或您配置的其他端口）成功访问。

      【推荐相关链接】：

      1. Vue CLI官方文档
      2. Chrome开发者工具文档
      3. VS Code调试指南
      4. npm文档
      5. yarn官方文档

      展开全部

      评论 编辑记录
    • Kwan的解忧杂货铺@新空间代码工作室 2024-05-20 20:11
      关注

      晚上好🌙🌙🌙
      本答案参考ChatGPT-3.5

      问题描述：

      在运行 Vue 项目时，浏览器出错，报错信息如下：

      ⑤ localhost × + 口 O localhost:8080 ☆ 西 无法访问此网站 localhost拒绝了我们的连接请求。 请试试以下办法： ·检查网络连接 ·检查代理服务器和防火墙 ERR_CONNECTION_REFUSED

      解决方案：

      1. 确认端口号是否正确
      • 确认项目的端口号是否正确，一般情况下默认为 localhost:8080
      • 如果端口号被占用了，可以在 package.json 中的 scripts 中添加命令："serve": "vue-cli-service serve --port XXXX"，其中 XXXX 是自己指定的端口号。
      1. 检查 Vue 项目是否启动成功
      • 通过命令行进入到 Vue 项目根目录，运行 npm run serve 命令
      • 如果在命令行中出现错误信息或者启动失败，需要根据错误提示进行解决
      1. 检查防火墙设置和代理服务器设置
      • 确认防火墙是否限制了本地访问
      • 确认是否使用代理服务器，如果使用，需要检查代理服务器的配置信息是否正确
      1. 重启浏览器和电脑
      • 关闭浏览器，等待一段时间后再次打开
      • 重启电脑后再次尝试访问

      总结：

      • 检查端口号、启动状态、防火墙、代理服务器等方面
      • 重启浏览器和电脑
      • 如果以上方法无法解决问题，可以尝试更换浏览器或者清除浏览器缓存。
      评论
    • 百锦再@新空间代码工作室 全栈领域优质创作者 2024-05-20 20:12
      关注

      解决浏览器显示问题的方法可能包括以下几点：1. 清除浏览器缓存：在浏览器设置中找到清除缓存的选项，清除缓存后重新加载页面。2. 更新浏览器版本：确保使用的浏览器是最新版本，有时候问题可能是由于旧版本浏览器的bug引起的。3. 检查网页代码：确保网页代码没有错误，并且符合相关规范，如HTML、CSS等。4. 检查网络连接：有时候网络连接不稳定也可能导致页面无法正常显示。5. 尝试在其他浏览器中打开：有时候问题可能是特定浏览器的兼容性问题，可以尝试在其他浏览器中打开看看是否有同样的问题。 
      无法提供具体代码示例，因为问题描述并未提供具体的错误信息或页面内容。

      有问题你别着急，评论留言都可以，看到马上就回复，尽量及时补充齐
      评论
    编辑
    预览

    报告相同问题？

  • 相关阅读:
    2022年中国消费金融行业数字化技术创新分析
    linux下kill某个用户所有进程
    c# 同步异步锁
    喜讯|宏时数据获得CMMI3级认证！欢迎了解自研统一运维监控平台！
    MySQL报错：unknown collation: ‘utf8mb4_0900_ai_ci‘
    Python使用magic判断文件MIME类型
    TextRank算法实践
    高速口光口通信
    微服务与领域驱动设计，架构实践总结
    Linux-Centos7安装Docker
  • 原文地址：https://ask.csdn.net/questions/8106536