Привет, ребята! Спустя много времени я вернулся с другой статьей, посвященной обработке любого количества поддоменов в одном проекте nuxtJS с помощью модуля nuxt k-domains.

Прежде всего, я хотел бы подвести итог о nuxtJS, nuxtJS - это javascript-фреймворк для создания веб-приложений на основе Vue.js, поэтому, если вы знаете Vue.js, nuxtJS легко использовать, с nuxtJS вы можете создавать статические сайты, универсальные приложения, отображаемые на стороне сервера, или одностраничные приложения SPA с преимуществами поисковой оптимизации (SEO) и всей экосистемы Vue.js.

Итак, перейдем к делу. Предположим, вам нужно создать 3 собственных сайта:

  • один для ведения блога,
  • второй для проектов
  • и один для вашего портфолио

но вы хотите, чтобы во всех них был одинаковый макет, а также были некоторые общие компоненты, такие как формы обратной связи, комментарии и так далее ... так как вы будете настраивать ???

  1. Первый вариант - создать монорепозиторий для общих компонентов или макетов и по одному проекту для каждого поддомена, поэтому вам потребуется как минимум 4 проекта.
  2. Второе, что вы можете сделать, - это создать 3 проекта и скопировать все эти общие компоненты во все проекты ... но что, если вы что-то измените ?? вам потребуется скопировать и вставить одно и то же снова во все эти проекты, что не является хорошей идеей ...

Итак, вот решение: вы можете создавать сайты для всех этих сайтов в одном проекте nuxtJS, все ваши макеты, общие компоненты, плагины, модули и все остальное будет жить в одном проекте. Все, что вам нужно сделать, это установить модуль nuxtJS k-domains

yarn add k-domains # npm i k-domains

и настройте его следующим образом:

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

Например :

export default {
    buildModules: [
      [ "k-domains", {
          subDomains: ["blog", "projects", "anotherSubDomain" ], // 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
|   ├───blog
|   ├───projects
|   └───main -domain

Теперь страницы в blog будут сопоставлены с поддоменом вашего блога, аналогично страницы в каталоге projects будут сопоставлены с поддоменом проектов, и все

# Теперь посмотрим на технические характеристики.

Итак, nuxtJS использует каталог /pages для автоматической генерации маршрутов, но теперь мы должны внести изменения в маршруты, поэтому в основном k-домены под капотом используют @nuxtjs/router для расширения или настройки фильтров, автоматически сгенерированных на основе routes на вашем request.header.host

newRoutes = options.routes
.filter(route => {    // remove routes from other directories        const toRemove = subdomains.filter(domain => {          
        return domain != routesDirectory
    })
    return !isUnderDirectory(route, toRemove);
})

а затем он удаляет имя поддомена из route.path и route.name, чтобы конечный URL-адрес выглядел как blog.example.com, а не как example.com/blog, и все остальное @nuxtjs/router позаботится обо всем остальном.

# Моя установка

Я использую Heroku для хостинга и настроил его для использования личного домена, и все мои поддомены добавлены туда сейчас с помощью всего одного проекта на Heroku. Я размещаю все эти сайты, вот ссылка на мой сайт madhusudan.live и Blog, контента пока нет, но я скоро обновлюсь, вот и все, спасибо, что прочитали эту статью, кстати, это мой первый модуль npm, так что вы открыты для предложений / отзывов, спасибо ...