404错误本质是服务器返回“资源未找到”，根源在于请求路径、服务上下文与构建配置三者未对齐；需通过network面板查看真实request url，比对html引用、文件实际位置、构建输出路径及服务器部署路径是否一致。
Failed to load resource: the server responded with a status of 404 (Not Found) 这个错误不是 JS 本身写错了，而是浏览器发出了一个 HTTP 请求，服务器明确回了“找不到文件”。关键不在代码语法，而在路径、服务上下文、构建配置三者是否对齐。
看 Network 面板里真实的 Request URL
打开开发者工具 → Network → 刷新页面 → 找标红的 404 条目 → 点开看 Headers 下的 Request URL。这个地址才是服务器真正收到的，也是你必须校准的目标。
- 如果显示
http://localhost/js/app.js，但实际文件在assets/js/app.js，那就该改 HTML 中的<script src="assets/js/app.js"></script> - 如果
Request URL是http://localhost/myapp/js/app.js，而你用的是 Tomcat，说明应用上下文是myapp，所有路径得带前缀，或改用绝对路径/myapp/js/app.js - URL 里有中文或
ö等字符？浏览器会自动编码成%C3%B6；若文件系统里存的是未编码名（如cafe.html），就必 404 —— 静态资源建议全用 ASCII 命名
区分 file:// 和 http:// 环境
双击 HTML 文件打开，地址栏是 file:/// 开头？那根本没走服务器，404 不会出现，只会报 Not allowed to load local resource 或白屏。所有路径解析逻辑都失效。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 必须用 HTTP 服务访问：VS Code 的 Live Server 插件、
npx serve -s、python3 -m http.server 8000 - 注意：
python -m http.server和npx serve -s不支持前端 history 模式 fallback，仅用于静态资源调试 -
file://下./js/app.js解析为磁盘相对路径，http://下则按当前 URL 路径拼接 —— 二者行为完全不同
检查构建工具输出路径与 HTML 引用是否一致
Webpack/Vite 打包后，JS 文件可能被哈希重命名（如 app.abc123.js），并放在子目录（如 dist/assets/）。如果 HTML 里还写 src="js/app.js"，自然 404。
- Vite 用户检查
vite.config.js中的base配置：base: process.env.NODE_ENV === 'production' ? '/my-project/' : '/'，确保和部署路径匹配 - Webpack 用户确认
output.publicPath是否正确，尤其部署到子路径时（如 GitHub Pages 的username.github.io/repo/） - 构建后别直接打开
dist/index.html—— 它依赖本地服务提供静态资源，双击打开必然触发一堆 404
Linux/macOS 服务器大小写与路径层级陷阱
Windows 下 JS/app.js 和 js/app.js 可能都能加载，但上线到 Linux 服务器就立刻 404 —— 因为它严格区分大小写。
-
<script src="JS/app.js"></script>在开发时正常，部署后报错？先查文件真实命名 -
../在某些服务器（如 Jetty、Stapler）中支持极差，src="../lib/utils.js"很可能失败；优先用绝对路径或基于根目录的路径（/js/utils.js） - Tomcat 要求静态资源必须在 Web 应用上下文内（如
webapps/myapp/js/），webapps/static/js/是另一个独立应用，跨目录引用无效
最容易被忽略的点：你以为路径写对了，其实服务器收到的请求 URL 已被 base 标签、<meta name="base">、甚至 Nginx 的 alias 指令悄悄改写了。不看 Network 面板里的 Request URL，只靠猜路径，90% 的时间都在浪费。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
