VSCode本地启动项目报404,首要排查端口是否被占用导致服务未真正启动;其次检查静态资源路径与开发服务器根目录是否匹配(如public下文件才可直接访问);最后排除VSCode或浏览器插件干扰请求。

VSCode 本身不提供 HTTP 服务,所谓“VSCode 运行网页报 404”,本质是它启动的开发服务器(如 vite、webpack-dev-server、vue-cli-service)没起来,或资源路径和服务器配置对不上。真正要查的不是 VSCode,而是你项目里那个命令背后的实际服务行为。
端口被占导致服务根本没启动
这是最常被忽略的底层原因:你敲了 npm run dev,终端显示 “Vite server running”,但其实只是个假成功——端口早被其他进程占了,Vite 自动 fallback 到一个空服务或代理页,所有 / 下的请求都返回 404。
- 在终端执行
netstat -ano | findstr "3000"(把3000换成你实际用的端口) - 如果返回带 PID 的一行(比如末尾是
12345),说明端口确实被占 - 执行
taskkill /F /pid 12345干掉它 - 再重启终端,重新运行启动命令
- Windows 下若提示
netstat不是内部命令,先cd c:\WINDOWS\system32\再执行
静态资源路径与开发服务器根目录不匹配
开发服务器默认 serve 的根是项目根目录,但你写的 HTML 或 JS 中用了绝对路径,而文件实际不在 public 目录下,就会 404。
-
public/下的文件(如public/js/app.js)可直接通过/js/app.js访问 -
src/下的资源(如src/assets/logo.png)必须经构建处理,不能用/assets/logo.png这种绝对路径引用 - Vite 项目若配置了
base: '/myapp/',所有资源 URL 会自动加前缀,import './main.js'最终解析为/myapp/main.js - Linux/macOS 部署时大小写敏感:
logo.PNG≠logo.png,本地 Windows 可能不报错,一上环境就 404
VSCode 或浏览器插件偷偷改了请求
某些插件会在页面加载阶段注入脚本、重写 URL 或拦截 fetch,导致资源请求发到错误地址,最终 404。
- Vetur、Auto Rename Tag、Prettier、ESLint 等前端相关插件,在 VSCode 中禁用后重启窗口再试
- Chrome 打开隐身窗口(无扩展),访问同一地址,看是否仍有 404
- 打开浏览器 Network 面板,点开某个 404 请求,看
Initiator列——如果是content-script.js或某个插件名,基本就是它干的 - 油猴(Tampermonkey)、广告屏蔽器、某些“前端助手”类扩展也常有类似行为
真正棘手的 404 往往卡在“服务看似运行,路径看似正确,但就是找不到资源”这个模糊地带。这时候别急着改代码,先确认端口干净、public/src 边界清晰、插件全关——这三步做完,80% 的 404 就消失了。


















