如何在Nuxt 3中使用子域名

Question

是否可以以某种方式在 Nuxt 3 中使用子域？

因此，不要使用这样的链接： https://example.com/projects/19302847

我可以使用这样的一个： https://19302847.example.com

Answer 1

要在 nuxt 中处理子域路由，请在页面目录中创建两个文件夹

页数
|-根域
|-- // 文件和文件夹
|- 子域
|-- //文件和文件夹

然后使用

app/router.options.ts

中的rouet选项配置，添加以下配置：

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
    routes: (_routes) => {
        let routesDirectory: any = null;
        const { ssrContext } = useNuxtApp();

        // check for subdomain in the url on the server
        if (process.server && ssrContext && ssrContext.event.node.req) {
            const req = ssrContext.event.node.req
            const subdomain = req.headers.host?.split('.')[0]
            if (subdomain !== 'www' && subdomain !== 'localhost' && subdomain !== 'localhost:3000') {
                routesDirectory = 'sub-domain'
            } else {
                routesDirectory = 'root-domain'
            }

        }

        // check for subdomain in the url on the client
        if (process.client && window.location.hostname) {
            const subdomain = window.location.hostname.split('.')[0]
            if (subdomain !== 'www' && subdomain !== 'localhost'  && subdomain !== 'localhost:3000') {
                routesDirectory = 'sub-domain'
            } else {
                routesDirectory = 'root-domain'
            }
        }

        // function to clear a directory not in use
        function isUnderDirectory (route: any, directory: any) {
            const path = route.path
            return path === '/' + directory || path.startsWith('/' + directory + '/')
        }

        let newRoutes = _routes

        if (routesDirectory) {
            // filter routes
            newRoutes = _routes.filter((route: any) => {
                const toRemove = routesDirectory === 'sub-domain' ? 'root-domain' : 'sub-domain'
                return !isUnderDirectory(route, toRemove)
            }).map((route: any) => {
                if (isUnderDirectory(route, 'sub-domain')) {
                    return {
                        ...route,
                        path: route.path.replace('/sub-domain', '/'),
                        name: route.name || 'index'
                    }
                } else if (isUnderDirectory(route, 'root-domain')) {
                    return {
                        ...route,
                        path: route.path.substr(routesDirectory.length + 1) || '/',
                        name: route.name || 'index'
                    }
                }
            })

        return newRoutes
        }

    }
}

Answer 2

要管理子域，您需要通过创建

app/router.options.ts

文件覆盖原始路由器设置。 您可以使用以下配置来实现此目的：

import type { RouterConfig } from "@nuxt/schema";
import type { RouteRecordRaw } from "vue-router";

export default <RouterConfig>{
  routes: (_routes) => {
    const subdomain = getSubdomain();
    if (subdomain) {
      return transformRoutesForSubdomain(_routes, subdomain);
    }
    return _routes;
  },
};

function getSubdomain(): string | undefined {
  const { ssrContext } = useNuxtApp();
  if (isServer() && ssrContext) {
    const { req } = ssrContext.event.node;
    return req.headers.host?.split(".")[0];
  } else if (isClient()) {
    return window.location.hostname.split(".")[0];
  }
}

function transformRoutesForSubdomain(
  routes: readonly RouteRecordRaw[],
  subdomain: string
): RouteRecordRaw[] {
  return routes
    .filter((route: RouteRecordRaw) => {
      return isUnderDirectory(route, subdomain);
    })
    .map((route: RouteRecordRaw) => {
      return {
        ...route,
        path: route.path.slice(subdomain.length + 1) || "/",
        name: route.name || "index",
      };
    });
}

function isUnderDirectory(route: RouteRecordRaw, directory: string): boolean {
  const { path } = route;
  return path === `/${directory}` || path.startsWith(`/${directory}/`);
}

function isServer(): boolean {
  return import.meta.server;
}

function isClient(): boolean {
  return !!(import.meta.client && window.location.hostname);
}

现在

pages

中的所有父文件夹都将充当子域，子域文件夹内的其他所有内容都将正常运行。 文件结构应如下所示：

/app/router.options.ts
/pages/first-subdomain/index.vue
/pages/first-subdomain/[slug].vue
/pages/secound-subdomain/index.vue

不要忘记在 app.vue 中添加组件;)