Vue.js配合Apache如何配置多入口SPA应用的重定向规则？

正确的.htaccess重定向配置如下 #

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # 直接访问入口文件时直接放行，不触发重写
  RewriteRule ^index\.html$ - [L]
  RewriteRule ^platform\.html$ - [L]

  # 匹配所有platform开头的路由，请求不是真实文件/目录时跳转至管理端入口
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^platform(/.*)?$ /platform.html [L]

  # 剩余所有非真实文件/目录的请求，跳转至客户端入口
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

之前配置失效的核心原因 #

1. 多余嵌套了两层<IfModule mod_rewrite.c>，属于无效冗余配置
2. RewriteCond规则仅对紧随其后的第一条RewriteRule生效，你之前的配置里判断“非文件/非目录”的条件仅作用于platform跳转规则，后续跳index.html的规则没有任何限制，会覆盖所有请求，导致管理端路径跳转被拦截
3. 原platform匹配规则没有做路径限制，可能误匹配到包含platform关键词的其他资源路径，新增(/.*)?可以精准匹配/platform、/platform/xxx这类管理端路由格式

配套校验项 #

• 确保打包后的platform.html和index.html同级放在站点根目录
• 如果Vue项目配置了非根路径的publicPath，要同步修改RewriteBase为对应路径
• 管理端Vue路由的base参数需配置为/platform/，避免前端路由跳转异常

内容的提问来源于stack exchange，提问作者Sadegh Shaikhi