本地双击打开HTML时/css/app.css报404,是因为file://协议下/被解析为磁盘根目录(如file:///css/app.css),而非项目根目录;唯一可靠解法是启动本地HTTP服务器(如python3 -m http.server 8000)或改用相对路径。

本地双击打开 HTML 时 /css/app.css 为什么 404?
因为 / 在 file:// 协议下被解析为本地磁盘根目录(如 file:///css/app.css),而非项目根目录。这不是 bug,是浏览器安全策略强制行为。
- 唯一可靠解法:启动本地 HTTP 服务器,例如
python3 -m http.server 8000或http-server - 避免在开发阶段依赖
/xxx路径做双击测试 - 如果必须用 file:// 协议,全部改用相对路径(
css/app.css)并确保 HTML 文件位置与引用关系严格匹配
<base href="/app/"> 会让 fetch("api/user") 请求错地址
<base> 不区分资源类型,它影响所有相对 URL:HTML 的 src、CSS 的 url()、JS 中的 fetch() 和 XMLHttpRequest 都会被重基准。
- 错误写法:
fetch("api/user")→ 实际发到/app/api/user(如果 base 是/app/) - 正确写法:
fetch("/api/user")(绝对路径)或fetch("//api.example.com/v1/user")(协议相对) - CSS 里
background: url(images/bg.png)同样受<base>影响,极易被忽略
Android 混合开发中 file:///android_asset/ 路径怎么映射静态资源?
WebView 加载本地 HTML 时,file:///android_asset/index.html 是入口,但所有相对路径仍以该 HTML 文件所在位置为基准——即 android_asset/ 目录。
- 推荐结构:
android_asset/index.html+android_asset/js/app.js+android_asset/css/style.css - 不要用
/js/app.js,它会尝试去file:///js/app.js(不存在) - 若需统一前缀,可在构建时用模板变量注入,例如
src="/js/app.js",运行时替换为./或空字符串
Nginx 配置 alias 与 root 混用导致资源 404
alias 和 root 对路径拼接逻辑完全不同:前者完全替换匹配部分,后者是追加。
立即学习“前端免费学习笔记(深入)”;
- 错误配置:
location /app/ { root /var/www; }→ 请求/app/css/style.css会找/var/www/app/css/style.css - 正确配置:
location /app/ { alias /var/www/myapp/; }→ 同样请求会找/var/www/myapp/css/style.css(注意alias值末尾必须有/) - HTML5 History 模式需配合:
try_files $uri $uri/ /app/index.html,否则子路由刷新 404
img.src、Vue Router 的 base 配置、构建工具输出的哈希文件名,这些都和 HTML 里的路径机制不在同一层,不能靠一个 <base> 或一次 Nginx 配置全解决。



















