本地index.html打不开需用http协议服务器运行,禁用file://;静态资源用相对路径并配base标签;确保mime类型为text/css; charset=utf-8且文件utf-8无bom;服务器配置默认首页index.html及正确权限。

本地 index.html 打不开?先确认是不是双击直接运行的
浏览器直接双击打开 index.html,地址栏显示的是 file:// 协议,这时很多功能会失效:AJAX 请求被跨域拦截、fetch() 读取本地 JSON 失败、Service Worker 不注册、甚至某些 CSS/JS 模块加载报错。
- 开发阶段务必用本地服务器启动,而不是双击文件
- 最轻量方案:终端进项目目录,运行
npx serve(需装 Node.js)或python3 -m http.server 8000 - 别信“用 VS Code Live Server 插件就万事大吉”——它只是帮你起服务,本质还是走
http://协议
静态资源路径写死成 ./img/logo.png,上线后 404?
本地测试能跑,上传到服务器却找不到图片/CSS/JS,大概率是路径没适配部署环境。根路径 /img/logo.png 和相对路径 ./img/logo.png 在子路径部署时行为完全不同。
- 所有静态资源引用优先用**相对路径**(如
img/logo.png),不加./或/开头 - 如果网站要部署在子目录(比如
https://example.com/my-project/),必须在 HTML 中设置<base href="/my-project/"> - 构建工具(Vite、Webpack)里要配
base: "/my-project/",否则生成的assets/路径会错位
上传到服务器后样式全乱?检查 MIME 类型和字符编码
HTML 渲染正常,但 CSS 不生效、中文变方块、图标显示为小方框——不是代码写错了,是服务器没正确声明响应头。
- 确保服务器返回
Content-Type: text/css; charset=utf-8(CSS 文件),不是text/plain -
index.html文件本身必须以 UTF-8 无 BOM 格式保存,编辑器右下角看一眼编码 - HTML 里必须有
<meta charset="UTF-8">,且放在最前面 - Apache 用户注意:
.htaccess里加AddDefaultCharset UTF-8;Nginx 用户检查charset utf-8;是否启用
域名解析好了,但访问还是 404?确认服务器默认首页配置
把 index.html 丢进服务器根目录,浏览器输入域名却提示 “Not Found”,不是 DNS 问题,是 Web 服务器根本没把它当首页处理。
立即学习“前端免费学习笔记(深入)”;
- Apache 默认找
index.html、index.htm,但如果你改过DirectoryIndex,得手动加回去 - Nginx 必须在
location /块里显式写index index.html; - GitHub Pages、Vercel、Netlify 这类平台默认支持
index.html,但 Netlify 要求部署目录选对(比如选dist而不是根目录) - 上传后用 FTP 或 SSH 确认文件权限:至少
644(HTML/CSS/JS),目录至少755











