Nuxt 3路由/中间件中子域名与自定义域名路由配置需求

项目目录结构 #

先规整pages目录，明确后台与前端的路由隔离：

pages/
├── app/
│   ├── dashboard.vue       # app.root.com/dashboard
│   ├── create-post.vue     # app.root.com/create-post
│   └── [...catchAll].vue   # app子域名下的404页面
└── blog/
    ├── index.vue           # 所有博客域名的首页
    ├── [postSlug].vue      # 博客文章详情页
    └── [...catchAll].vue   # 博客域名下的404页面

核心实现：服务端域名路由重写 #

创建服务端中间件server/middleware/domain-router.ts，在请求到达路由层前根据域名改写请求路径：

export default defineEventHandler(event => {
  const host = getRequestURL(event).hostname

  // 匹配app后台子域名
  if (host === 'app.root.com') {
    // 根路径默认跳转到dashboard
    event.node.req.url = `/app${event.node.req.url === '/' ? '/dashboard' : event.node.req.url}`
  } 
  // 匹配任意子域名（如subdomain.root.com）和自定义域名custom.com
  else if (host.endsWith('.root.com') || host === 'custom.com') {
    event.node.req.url = `/blog${event.node.req.url}`
  }
})

Nuxt配置优化 #

在nuxt.config.ts中确保路由基础配置正确，避免前缀冲突：

export default defineNuxtConfig({
  app: {
    baseURL: '/' // 保持根路径，避免路由前缀干扰
  },
  // 可选：静态生成场景下配置预渲染路由（按需调整）
  nitro: {
    prerender: {
      routes: [
        '/app/dashboard',
        '/blog'
      ]
    }
  }
})

本地测试配置 #

修改本地hosts文件（Windows：C:\Windows\System32\drivers\etc\hosts；Mac/Linux：/etc/hosts），添加测试域名映射：

127.0.0.1 app.root.com
127.0.0.1 test.root.com
127.0.0.1 custom.com

启动Nuxt时指定80端口模拟生产环境：

nuxt dev --port 80

404页面处理 #

在两个目录的[...catchAll].vue中分别处理对应域名下的404逻辑，示例：

<!-- pages/app/[...catchAll].vue -->
<template>
  <div class="app-404">
    <h1>后台页面不存在</h1>
    <NuxtLink to="/dashboard">返回控制台</NuxtLink>
  </div>
</template>

<script setup>
useHead({ title: '404 - 后台' })
</script>

注意事项 #

• 基于服务端中间件执行域名判断，避免客户端跨域或域名信息不准确的问题
• 生产环境配置HTSSL证书后，无需修改代码逻辑
• 任意xxx.root.com形式的动态子域名已通过host.endsWith('.root.com')覆盖，无需额外配置

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