Vue Router 4刷新页面404：WordPress无头Vue3主题问题求助

使用Vue Router的history模式时，刷新页面会触发浏览器直接向服务器请求当前路由路径（比如/wpdev/registration），但WordPress服务器无法识别这些前端路由，会判定为不存在的页面，因此返回404错误。首次加载正常是因为初始请求指向WordPress入口，Vue接管路由后在前端完成跳转逻辑，不会触发服务器请求。

1. 修正Vue Router的基础路径配置 #

你的路由代码中createWebHistory传入了window.location.pathname，这会导致基础路径随当前页面动态变化，引发路由解析错误。需要传入固定的站点基础路径（对应WordPress的子目录/wpdev/）：

import { createRouter, createWebHistory } from 'vue-router'
import UserLanding from '../components/UserLanding.vue'
import UserRegistration from '../components/UserRegistration.vue'

const router = createRouter({
    // 传入固定的站点基础路径
    history: createWebHistory('/wpdev/'),
    routes: [
        {
            name: 'UserLanding',
            path: '/',
            component: UserLanding
        },
        {
            name: 'UserRegistration',
            path: '/registration',
            component: UserRegistration 
        }
    ]
})

export default router

2. 调整.htaccess的Rewrite规则 #

需要让服务器将前端路由请求转发到Vue应用的入口，同时保留WordPress后台、API及静态文件的正常访问。修改你的.htaccess文件，调整WordPress默认规则中的路由转发逻辑：

# BEGIN WordPress
# Le direttive (linee) tra `BEGIN WordPress` e `END WordPress` sono
# generate dinamicamente, e dovrebbero essere modificate solo tramite i filtri di WordPress.
# Ogni modifica alle direttive tra questi marcatori verrà sovrascritta.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /wpdev/
RewriteRule ^index\.php$ - [L]

# 排除WordPress后台、API及静态文件/目录，避免影响原有功能
RewriteCond %{REQUEST_URI} !^/wpdev/wp-admin/
RewriteCond %{REQUEST_URI} !^/wpdev/wp-json/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 将前端路由请求转发到Vue入口（替换为你实际的Vue入口文件路径）
RewriteRule . /wpdev/vue-index.html [L]

# 原有WordPress路由规则，处理非前端路由的请求
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wpdev/index.php [L]
</IfModule>

# END WordPress

<IfModule mod_rewrite.c>
Options All -Indexes
</IfModule>

备选方案：通过WordPress函数配置路由 #

如果你的Vue应用是通过WordPress主题模板加载的，可直接在主题的functions.php中添加规则，让WordPress识别前端路由并返回Vue入口：

// 注册前端路由规则，可根据需要添加更多路由
add_action('init', function() {
    add_rewrite_rule('^registration/?$', 'index.php?vue_route=registration', 'top');
});

// 允许自定义查询变量，让WordPress识别vue_route参数
add_filter('query_vars', function($vars) {
    $vars[] = 'vue_route';
    return $vars;
});

// 路由跳转时加载Vue入口模板（需提前创建vue-index.php模板文件）
add_action('template_redirect', function() {
    $vueRoute = get_query_var('vue_route');
    if ($vueRoute) {
        get_template_part('vue-index');
        exit;
    }
});

添加代码后，进入WordPress后台「设置-固定链接」页面，点击「保存更改」刷新路由规则。

Vue Router是纯前端路由系统，仅在浏览器端通过JS处理路由切换，不会向服务器发送请求。但刷新页面时，浏览器会绕过前端逻辑，直接向服务器请求当前URL，而服务器没有对应的资源或路由规则，因此返回404。只有让服务器将这些前端路由请求转发回Vue入口，才能让Vue重新初始化并渲染对应页面。

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