404主因是JS文件路径配置错误：相对路径以HTML位置为基准易错位，绝对路径以/开头可避免；须用DevTools Network确认Request URL，本地需用Web服务器（非file://）测试，构建部署时需匹配assetsDir/base或publicPath配置。
检查 src 路径是否为绝对路径或正确相对路径
404 最常见原因是浏览器请求的 JS 文件根本不在服务器对应位置。比如 HTML 在 /blog/post.html，而写 <script src="js/main.js"></script>，实际会请求 /blog/js/main.js —— 但你的 JS 文件可能在根目录的 /js/main.js。
解决办法：
- 统一用以
/开头的绝对路径：<script src="/js/main.js"></script>，这样无论当前页面在哪，都从根目录找 - 避免
./或../嵌套过深；尤其 SPA 路由（如/user/settings/profile）下，相对路径极易错位 - 用浏览器 DevTools 的 Network 标签页，点开报 404 的 JS 请求，看
Request URL究竟是什么——这是最真实的线索
确认静态文件服务已启用且目录结构匹配
本地双击打开 HTML（file:// 协议）时，<script src="/js/main.js"> 会直接失败，因为浏览器不支持 file:// 下的根路径解析。这不是代码错，是运行环境问题。
必须用 Web 服务器提供服务：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- VS Code 安装 Live Server 插件后右键 “Open with Live Server”，地址变成
http://127.0.0.1:5500/ - Python 用户可运行
python3 -m http.server 8000（注意：它不支持/开头的路径自动映射到根目录，需确保项目根即工作目录） - Flask 用户要确认
static文件夹存在且命名准确，引用必须用url_for('static', filename='js/main.js')，不能手写路径
排查构建工具或托管平台对路径的重写
Webpack/Vite 等工具默认把输出 JS 放进 /assets/ 子目录，但 HTML 中仍写 src="js/main.js"，就会 404。同理，GitHub Pages、Netlify 默认只认根目录的 404.html，但如果你在构建产物里生成了 /dist/js/main.js，而 index.html 里写的是 src="js/main.js"，那部署后路径就断了。
关键动作：
- Vite 项目检查
vite.config.js中的build.assetsDir和base配置；若部署到子路径（如https://me.github.io/my-app/），base必须设为"/my-app/" - Webpack 用户核对
output.publicPath，它决定所有资源 URL 的前缀 - 静态托管前，先本地起服务，打开 DevTools → Network，逐个确认每个
.js请求的 Status 是 200 且响应体是 JS 代码，不是 HTML
禁止在 404 页面中再触发资源 404
你写的 404.html 本身被访问时，URL 是任意的（比如 /xxx/yyy/zzz），此时任何相对路径引用都会基于这个 URL 解析，极大概率二次 404 —— 比如 <link rel="stylesheet" href="css/style.css"> 会尝试加载 /xxx/yyy/css/style.css。
安全做法只有两个：
- 所有资源用绝对路径：
href="/css/style.css"、src="/js/script.js" - 内联关键 CSS/JS：
<style>body{...}</style>、<script>console.log(...)</script>，彻底消除外部请求依赖
最后提醒一句：别信“刷新一下就好了”。404 是服务器明确返回的状态码，不是缓存问题。只要 Network 里看到 Status: 404 Not Found，说明请求压根没找到文件，得回到路径、服务、构建这三层去查。
