index.html文件必须放在根目录下吗

Web服务器默认查找index.html的路径是其配置的“服务根目录”（如Nginx的/var/www/html、Apache的DocumentRoot、Tomcat的webapps/ROOT/），而非绝对物理路径；该目录下存在index.html即能被/请求默认命中。

不一定必须放在根目录，但“能被默认访问”这件事，取决于服务器是否把该文件所在路径识别为“可服务的根”。

Web 服务器默认查找 index.html 的路径是哪？

绝大多数 Web 服务器（Nginx、Apache、Tomcat、Vite 开发服务器、Vue CLI dev server）都遵循一个约定：当用户请求一个目录（比如 / 或 /admin/）时，会按顺序尝试查找该目录下的预设文件名，index.html 是其中最常见且通常排第一的候选。

关键点在于：这个“目录”是谁的根？

• Nginx 默认服务根目录是 /usr/share/nginx/html 或 /var/www/html，你把 index.html 放进去，访问 http://localhost/ 就能命中
• Apache 类似，看 DocumentRoot 配置，常见为 /var/www/html
• Tomcat 的 WAR 包解压后，webapp/ 目录就是应用根，webapp/index.html 才对应 http://localhost:8080/
• Vite 项目中，开发时 index.html 必须在项目根（即 vite.config.js 所在层），构建后它会被输出到 dist/index.html —— 此时 dist/ 才是实际服务根

放错位置导致 404 或空白页的典型场景

常见错误不是“文件放错了”，而是“服务没指向它”。比如：

立即学习“前端免费学习笔记（深入）”；

• 用 python3 -m http.server 启动静态服务时，当前工作目录就是根 —— 如果你在 src/ 里执行命令，那 src/index.html 才是 /；而你在项目根执行，就得把 index.html 放项目根
• Vue CLI 项目中，修改了 public/index.html 才生效，改根目录下的 index.html 没用 —— 因为构建流程只读 public/ 下的模板
• Nginx 配置了 location /app { root /opt/myapp; }，那么真实根其实是 /opt/myapp，此时要让 http://site/app/ 显示页面，index.html 得放在 /opt/myapp/index.html，而不是 /opt/myapp/dist/index.html（除非你额外配 index index.html; 并确保路径映射正确）

想换位置又保持默认访问，该怎么配？

不挪文件，改配置更稳妥。核心就两条：

• 告诉服务器“这个 URL 路径对应哪个物理目录”（root 或 alias）
• 确认该目录下启用了 index 指令（Nginx 默认开启，Apache 需 DirectoryIndex index.html）

例如 Nginx 中，你想让 /dashboard/ 默认加载 /home/user/app/build/index.html：

location /dashboard/ {    alias /home/user/app/build/;    index index.html;}

注意：alias 末尾的 / 必须和 location 末尾一致，否则路径拼接会出错 —— 这是 90% 的 404 根源。

真正容易被忽略的是：不同工具链对“根”的定义完全独立，index.html 的位置从来不是绝对的，而是相对于你启动服务时指定或默认的 serving root。盯住那个 root，比死记“必须放哪”有用得多。