如何为WordPress中Vue SPA的createWebHistory()配置.htaccess路由规则

直接上可行的.htaccess配置，同时说明逻辑和注意事项：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /

# 让WordPress处理所有非/admin的路由
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/admin
RewriteRule . /index.php [L]

# 让Vue SPA处理/admin下的所有子路由
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^admin/(.*)$ /admin/index.html [L]
</IfModule>

配置说明 #

• 保留了WordPress默认的HTTP_AUTHORIZATION规则，避免后台登录验证失效。
• 第一部分规则：先跳过根目录的index.php，然后判断请求的不是真实存在的文件或目录，且路径不是/admin开头时，转发到WordPress的入口文件，确保主站路由正常。
• 第二部分规则：同样判断请求不是真实文件/目录时，把所有/admin开头的子路由请求转发到Vue SPA的入口文件（这里假设是/admin/index.html，如果你的Vue入口是index.php，替换成对应文件名即可），让Vue Router接管路由处理。

必须的Vue配置 #

确保你的Vue Router设置了history模式，否则子路由会带#，也无法触发服务器路由转发：

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 你的路由配置
  ]
})

之前尝试方案的问题 #

1. 第一个方案：只排除了/admin的请求，但没有把这些请求转发到Vue入口，服务器找不到对应资源就返回404。
2. 第二个方案：路由规则顺序和转发目标可能有误，若Vue入口是index.html而非index.php，就会失效。
3. 第三个方案：只处理了/admin的路由，完全忽略了WordPress主站的路由规则，导致主站页面无法访问。

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