Nuxt 子域路由答案

【问题标题】：Nuxt subdomain routingNuxt 子域路由
【发布时间】：2020-07-31 18:42:47
【问题描述】：

我正在尝试在 Nuxt 中实现子域路由。这是我需要做的：

/pages/username/index.vue:
username1.mydomain.com (this page should display "hello, i am username1")
username2.mydomain.com (this page should display "hello, i am username2")
username3.mydomain.com (this page should display "hello, i am username3")
username4.mydomain.com (this page should display "hello, i am username4")
and so on

/pages/username/content.vue
username1.mydomain.com/content (this page should display "content by username1")
username2.mydomain.com/content (this page should display "content by username2")
username3.mydomain.com/content (this page should display "content by username3")
username4.mydomain.com/content (this page should display "content by username4")
and so on

我找到了this link（还没有让它工作），但它使用@Nuxtjs/router（我认为）覆盖vue-router - 想知道是否有更好的方法，我真的很喜欢nuxt“创建页面”的能力而且您不需要定义路线”方法。有没有办法在 nuxt 中做到这一点，最好不用 vue-router，保持 nuxt 默认页面/路由行为？

【问题讨论】：

标签： routes subdomain nuxt.js wildcard-subdomain

【解决方案1】：

// router.js

import Router from 'vue-router'

export function createRouter(ssrContext, createDefaultRouter, routerOptions) {
  const options = routerOptions || createDefaultRouter(ssrContext).options

  let routesDirectory = null

  if (process.server && ssrContext && ssrContext.nuxt && ssrContext.req) {
    const req = ssrContext.req

    const domainLevel = (req.headers.host.match(/\./g) || []).length + 1

    // Get routes directory by hostname

    routesDirectory = domainLevel > 2 ? 'sub-domain' : 'root-domain'
    // Save to the object that will be sent to the client as inline-script
    ssrContext.nuxt.routesDirectory = routesDirectory
  }
  if (process.client) {
    // Get what we saved on SSR
    if (window.__NUXT__ && window.__NUXT__.routesDirectory) {
      routesDirectory = window.__NUXT__.routesDirectory
    }
  }

  function isUnderDirectory(route, directory) {
    const path = route.path
    return path === '/' + directory || path.startsWith('/' + directory + '/')
  }

  let newRoutes = options.routes
  if (routesDirectory) {
    newRoutes = options.routes
      .filter((route) => {
        // remove routes from other directories
        const toRemove =
          routesDirectory === 'sub-domain'
            ? 'root-domain'
            : 'sub-domain'
        return !isUnderDirectory(route, toRemove)
      })
      .map((route) => {
        // remove directory from path and name
        if (isUnderDirectory(route, routesDirectory)) {
          return {
            ...route,
            path: route.path.substr(routesDirectory.length + 1) || '/',
            name: route.name.substr(routesDirectory.length + 1) || 'index'
          }
        }
        return route
      })
  }

  return new Router({
    ...options,
    routes: newRoutes
  })
}

https://github.com/nuxt-community/router-module/issues/22#issuecomment-628313757

【讨论】：

【解决方案2】：

如果您有预先确定的用户名列表，此模块“k-domains”可以为您提供帮助。

这是example：

  export default {
    buildModules: [
      [ "k-domains", {
          subDomains: ["username1", "username2", "username3" ], // List of directories to hold te pages for your subdomains
          rootDomain: "main-domain" //  directory to hold the pages for root domain  
      }
      ],
      ["@nuxtjs/router",{
          keepDefaultRouter: true // this line is mandatory...
      }
      ]
    ]
}

文件树如下：

|   
|─pages
|   ├───username1
|   ├───username2
|   ├───username3
|   └───main-domain

回复于：https://stackoverflow.com/a/65813846/3739410

但是如果您的用户名无法预测，您应该使用路由器来处理子域，如下所示： https://levelup.gitconnected.com/managing-wildcard-subdomains-with-vue-router-9fd74518f2f5

【讨论】：