如何配置.htaccess将所有路径重定向到根目录并基于URL渲染内容

可直接复用的配置代码 #

将以下代码保存为.htaccess文件，放到站点根目录即可生效，无需硬编码域名，本地开发、线上部署环境通用：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # 跳过真实存在的文件、目录、软链接请求，解决静态资源加载失效问题
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l

  # 所有不存在的路径统一转发到根目录入口页，保留原始URL不跳转
  RewriteRule ^.*$ /index.html [L,QSA]
</IfModule>

配置说明 #

• 多环境无硬编码适配：整段规则未绑定任何固定域名、端口，不管是本地localhost调试还是正式域名上线，只要文件放在站点根目录就可以直接运行，切换环境不需要修改配置。如果站点部署在域名子目录（比如localhost/map-project/），仅需要把RewriteBase /修改为RewriteBase /map-project/，最后一行规则的/index.html修改为/map-project/index.html即可。
• 静态资源无影响：规则前三个判断条件会先校验当前请求是否对应服务器上真实存在的文件、目录、软链接，只有匹配不到真实资源的路由类请求才会被转发。站点内的.js、.css、.svg、图片等静态资源都是服务器上的真实文件，会直接正常返回，不会被错误转发到入口页导致加载失效。
• 前端逻辑零改动兼容：转发属于服务器内部转发，不会修改地址栏的原始URL，原有通过JS读取路径渲染对应地图内容、pushState生成语义化链接的逻辑不需要做任何调整，直接正常运行即可。支持用户直接通过地址栏输入语义化URL、从收藏夹访问页面，不会再触发404错误。

旧方案常见问题 #

此前零散代码失效的核心原因有两个：

• 缺少真实资源校验逻辑，把所有请求（包括静态资源）全部转发到入口页，浏览器拿到的静态资源返回内容都是HTML入口页代码，无法正常解析加载
• 规则内硬编码了正式域名，本地调试时必须修改配置才能运行，环境切换成本高

内容的提问来源于stack exchange，提问作者Timothée Billiet