“Failed to load resource”报错需结合Network面板状态码精准定位：404表示资源路径错误或缺失；ERR_CONNECTION_REFUSED说明本地服务未启动；ERR_BLOCKED_BY_CLIENT多因广告拦截插件所致；ERR_CERT_DATE_INVALID为HTTPS证书过期。
当你在Chrome开发者工具Console中看到“Failed to load resource”报错时，说明浏览器发起的某项资源请求已中断或被拒绝，具体原因可能是404、连接被拒、证书过期、被客户端拦截等——必须结合Network面板中的状态码和请求详情逐项定位，不能只看Console里的一行红字。
先看Network面板确认错误类型
打开开发者工具（F12）→ 切换到Network标签页 → 刷新页面 → 找出红色标记的请求行 → 点击该请求 → 查看右侧Headers和Preview/Response选项卡。
重点看Status列的数值：【404】表示路径错误或文件缺失；【ERR_CONNECTION_REFUSED】说明本地服务根本没启动；【ERR_CERT_DATE_INVALID】是HTTPS证书过期；【ERR_BLOCKED_BY_CLIENT】基本可断定是广告拦截插件或隐私扩展干的。
这一步跳过Network直接盯Console，等于蒙眼修电路——你永远不知道断的是火线还是零线。
排查404（Not Found）错误
方法一：检查资源引用路径是否拼写错误
打开HTML或JS源码，定位报错资源的src/href属性值，比如<script src="js/main.js"> → 确认项目根目录下是否存在./js/main.js这个物理文件。注意大小写、斜杠方向、多级目录漏写../等问题。</script>
方法二：验证静态资源是否被构建工具排除
若用Vite/Webpack打包，检查vite.config.ts或webpack.config.js中assetsInclude、publicDir、copy插件等配置，确认该资源未被过滤或误删。常见坑：把icon.png放在src目录却没在代码中import，构建后它根本不会出现在dist里。
方法三：查看服务器路由是否劫持了静态路径
如果部署在Nginx或Spring Boot等后端环境，需确认server块中是否有location /js/ { try_files $uri =404; }这类规则，且$uri指向的磁盘路径与实际文件位置一致。否则浏览器请求/js/app.js，服务器可能返回index.html而不是404，导致控制台不报错但功能异常——这种隐性错误更难发现。
处理ERR_CONNECTION_REFUSED
第一步：确认开发服务器进程是否存活
终端执行ps aux | grep -i "node\|vite\|webpack"（macOS/Linux）或tasklist | findstr "node"（Windows），看npm run dev对应的进程是否存在。不存在就重新执行启动命令。
第二步：验证端口是否被占用或防火墙拦截
运行netstat -ano | findstr :3000（Windows）或lsof -i :3000（macOS/Linux），若端口被其他进程占用，要么杀掉它（taskkill /PID xxx /F 或 kill -9 xxx），要么改vite.config.ts中server.port为3001。企业网络环境下，还需检查Windows Defender防火墙是否放行该端口。
第三步：检查代理配置是否指向错误地址
打开vite.config.ts或vue.config.js，核对proxy配置里的target值，例如target: 'http://localhost:8080' → 实际后端服务必须正在监听8080端口，且不能写成'http://127.0.0.1:8080'（某些代理库对localhost和127.0.0.1处理不一致）。
应对ERR_BLOCKED_BY_CLIENT
禁用所有浏览器扩展 → 刷新页面 → 若报错消失，逐个启用扩展并刷新，定位到具体哪个插件拦截了该资源（通常是uBlock Origin、AdGuard或Privacy Badger）。
找到问题扩展后，点击其图标 → 选择“不在此网站上启用”或“暂停在此站点上运行”，不要直接卸载——很多开发调试依赖这些工具的白名单机制。
这一步操作起来很简单，直接把扩展开关关掉就行，但很多人会忽略它而花两小时查代码。
快速验证证书类错误（ERR_CERT_DATE_INVALID）
在Network面板中点击报错请求 → Headers → 查看General下的Security项，若显示“Certificate is invalid”，双击该请求 → 点击“Advanced” → “Continue to [域名] (unsafe)” → 刷新页面即可临时绕过。
注意：仅限本地开发或测试环境使用，生产环境必须更新有效证书。
