如何在Nuxt 3中使用子域名？实现路径转子域名路由

完全可以实现将https://example.com/projects/19302847这类路径转换为https://19302847.example.com子域名形式的路由，下面是具体实现步骤：

1. 服务器端中间件解析子域名 #

在Nuxt 3中创建服务器中间件，用于解析子域名并重写路由：

在server/middleware/subdomain.ts文件中添加以下代码：

export default defineEventHandler((event) => {
  const host = getRequestHeader(event, 'host') || '';
  // 匹配非www开头的子域名，适配你的主域名
  const subdomainMatch = host.match(/^(?!www)([a-zA-Z0-9-]+)\.example\.com$/);
  
  if (subdomainMatch) {
    const projectId = subdomainMatch[1];
    // 将子域名映射到对应的项目路径
    event.node.req.url = `/projects/${projectId}`;
  }
});

这个中间件会在每个请求到达时检查请求的Host头，提取子域名作为项目ID，然后将请求路径重写为原有的/projects/{projectId}格式，让Nuxt的路由系统正常匹配对应的页面组件。

2. 配置反向代理服务器（以Nginx为例） #

需要确保你的服务器能接收所有子域名的请求，并转发到Nuxt应用：

server {
  listen 443 ssl;
  server_name *.example.com;

  # 配置通配符SSL证书
  ssl_certificate /path/to/your/wildcard.crt;
  ssl_certificate_key /path/to/your/wildcard.key;

  location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

# 重定向HTTP到HTTPS
server {
  listen 80;
  server_name *.example.com;
  return 301 https://$host$request_uri;
}

注意：需要申请支持通配符的SSL证书（比如*.example.com），同时在DNS服务商处配置通配符解析（*.example.com指向你的服务器IP）。

3. 静态站点（SSG）的特殊处理 #

如果你的Nuxt项目是静态生成模式，由于没有服务器端运行环境，需要借助部署平台的路由规则来实现子域名映射，比如：

• 在Netlify中，在_redirects文件添加规则：https://*.example.com/* https://example.com/projects/:splat 200!
• 在Vercel中，在vercel.json配置重写规则，将子域名请求映射到对应的路径

不过这种客户端/平台层面的映射会有SEO优化的局限性，推荐优先使用服务器端渲染（SSR）或边缘渲染模式。

注意事项 #

• 开发环境测试时，可以修改本地hosts文件添加子域名映射（比如127.0.0.1 19302847.example.com）
• 如果有多个子域名业务场景，可以扩展中间件的匹配逻辑，区分不同类型的子域名

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