Nuxt.js+Docker+Traefik部署PathPrefix路由匹配异常问题求助

我们通过Docker+Traefik部署Nuxt.js博客，用PathPrefix('/blog')配置让博客从https://example.com/blog/而非根路径提供服务，Docker Compose配置如下：

version: "3.9"

services:
  {{ project_id }}-awesome-blog-{{ awesome_blog_env }}:
    # 其他配置省略
    labels:
      - traefik.http.routers.awesome_blog-{{ awesome_blog_env }}-router.rule=Host(`{{ awesome_blog_host_dns }}`) && PathPrefix(`/blog`)
    # 其他配置省略
      - {{ docker_network }}

networks:
  {{ docker_network }}:
    external: true

遇到的问题：

• 服务器端访问https://example.com/blog/时，this.$router显示无匹配路由；但本地访问http://localhost:3000/时，this.$router能正确匹配index___en路由。
• 尝试设置router.base: '/blog/'，本地测试有效，但服务器端直接返回404。
• 临时将页面文件复制到/blog/文件夹后页面可响应，但serverMiddleware仍返回404。
• 尝试过修改路由前缀的临时代码，无效：

// 尝试修改路由路径，但无效果
this.$router.fullPath = this.$router.fullpath.replace('/blog', '/')
this.$router.path = this.$router.path.replace('/blog', '/')

请问有没有方法让Nuxt忽略URL中的/blog/路径？

解决方案 #

1. 修改Traefik配置：使用PathPrefixStrip替代PathPrefix #

Traefik的PathPrefix会把完整路径（包括/blog）转发给Nuxt服务，导致Nuxt路由无法匹配。换成PathPrefixStrip可以在转发请求前去掉/blog前缀，让Nuxt收到的请求路径为根路径，无需修改Nuxt路由核心配置。

修改后的Traefik标签配置：

- traefik.http.routers.awesome_blog-{{ awesome_blog_env }}-router.rule=Host(`{{ awesome_blog_host_dns }}`) && PathPrefix(`/blog`)
- traefik.http.middlewares.awesome-blog-strip-prefix.stripprefix.prefixes=/blog
- traefik.http.routers.awesome_blog-{{ awesome_blog_env }}-router.middlewares=awesome-blog-strip-prefix@docker

2. 配合Nuxt的router.base配置（可选，用于本地模拟生产环境） #

如果需要本地开发时也模拟/blog前缀访问，可在nuxt.config.js中配置：

export default {
  router: {
    base: process.env.NODE_ENV === 'production' ? '/' : '/'
    // 若未使用Traefik的PathPrefixStrip，生产环境需设为'/blog/'
  }
}

注意：如果已经用了PathPrefixStrip，生产环境下router.base设为'/'即可，因为Traefik已自动去掉前缀；若未使用PathPrefixStrip，则必须设置router.base: '/blog/'，同时确保Nuxt构建时资源路径生成正确。

3. 修复serverMiddleware的路径问题 #

如果使用了serverMiddleware，需确保路径配置适配前缀：

• 若用了PathPrefixStrip：Nuxt收到的/blog/api请求会被转为/api，直接匹配原serverMiddleware的/api路径即可。
• 若未用PathPrefixStrip：需动态调整serverMiddleware的路径，示例如下：

const basePath = process.env.NODE_ENV === 'production' ? '/blog' : ''

export default {
  serverMiddleware: [
    { path: `${basePath}/api`, handler: '~/api/index.js' }
  ]
}

为什么之前的临时代码无效？ #

直接修改this.$router的fullPath或path属性仅能修改客户端路由对象，服务器端渲染时完全不生效，且会破坏路由正常逻辑，导致状态混乱，因此这种方法不可行。

内容的提问来源于stack exchange，提问作者Toni Michel Caubet