如何在WordPress的/marketing路径部署Nuxt.js(SSR)并解决路由失效问题

1. 修正Nuxt.js的路由基础配置 #

先改nuxt.config.js里的router.base，让Nuxt明确自己挂载在/marketing路径下——这是内部路由正常工作的核心：

export default {
  router: {
    base: '/marketing/'
  }
}

改完重启Nuxt服务，这样Nuxt生成的所有路由、NuxtLink都会自动带上/marketing前缀，不会再出现跳转错误。

2. 调整.htaccess的反向代理规则 #

WordPress本身有一套重写规则，得把Nuxt的代理规则放在它前面，同时修正匹配逻辑：

<IfModule mod_rewrite.c>
    RewriteEngine On

    # 代理/marketing路径下的所有请求到Nuxt服务
    # 匹配/marketing根路径
    RewriteRule ^marketing$ http://localhost:3000/ [P,L,QSA]
    # 匹配/marketing下的子路径
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^marketing/(.*)$ http://localhost:3000/$1 [P,L,QSA]

    # 保留WordPress原有的重写规则，不要修改
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>

关键调整点： #

• 去掉规则开头的/：.htaccess里的路径匹配是相对网站根目录的，不需要前缀/
• 添加QSA参数：确保请求中的查询字符串能完整传递给Nuxt服务
• 把Nuxt规则放在前面：让服务器优先处理/marketing路径的请求，避免被WordPress规则拦截

3. 验证配置生效 #

1. 重启Apache（或你使用的Web服务器），确保.htaccess配置生效
2. 重启Nuxt服务，让base路径配置生效
3. 访问my-wp-site.com/marketing，确认Nuxt首页正常显示
4. 点击Nuxt内部的NuxtLink，检查能否正确跳转到my-wp-site.com/marketing/products这类子页面，且内容渲染正常

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