Привет, ребята! Спустя много времени я вернулся с другой статьей, посвященной обработке любого количества поддоменов в одном проекте nuxtJS с помощью модуля nuxt k-domains.
Прежде всего, я хотел бы подвести итог о nuxtJS, nuxtJS - это javascript-фреймворк для создания веб-приложений на основе Vue.js, поэтому, если вы знаете Vue.js, nuxtJS легко использовать, с nuxtJS вы можете создавать статические сайты, универсальные приложения, отображаемые на стороне сервера, или одностраничные приложения SPA с преимуществами поисковой оптимизации (SEO) и всей экосистемы Vue.js.
Итак, перейдем к делу. Предположим, вам нужно создать 3 собственных сайта:
- один для ведения блога,
- второй для проектов
- и один для вашего портфолио
но вы хотите, чтобы во всех них был одинаковый макет, а также были некоторые общие компоненты, такие как формы обратной связи, комментарии и так далее ... так как вы будете настраивать ???
- Первый вариант - создать монорепозиторий для общих компонентов или макетов и по одному проекту для каждого поддомена, поэтому вам потребуется как минимум 4 проекта.
- Второе, что вы можете сделать, - это создать 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, так что вы открыты для предложений / отзывов, спасибо ...