nuxt что это такое
Nuxt.js — полезный инструмент для создания больших приложений
Дата публикации: 2019-04-10
От автора: давайте сегодня поговорим о том, что такое Nuxt.js. Что можно создавать с его помощью, какими возможностями обладает новая технология, как она может быть полезна для разработчиков — обо всем этом будет подробно рассказано в данном материале.
Речь пойдет о фреймворке высокого уровня, созданном с помощью Vue.js. Он позволяет создавать готовые к работе веб-приложения и призван упростить разработку универсальных и одностраничных сервисов.
Nuxt.js построен с целью улучшения Vue.js. Таким образом, они не являются взаимозаменяемыми. Vue.js может работать без Nuxt.js, но последний без Vue не обойдется. Он — основа для более простого создания сложных приложений Vue, не предназначенная для других фреймворков.
Nuxt делает за нас довольно много. Достаточно поместить в директорию «pages» файл «index.vue» с компонентом — и у нас готов одностраничник, который можно запустить в отладочном режиме командой «nuxt» и открыть на «localhost». Почти то же самое может «голый» Vue с Webpack, но даже в таком минимальном примере фреймворк уже начинает помогать нам «под капотом»: из коробки включен Hot Reloading, для страниц настроены кодировки, заголовки и все прочее.
Преимущества Nuxt.js
Давайте более подробно рассмотрим преимущества фреймворка и разберемся, почему мы его можем использовать, как он упрощает разработку, что он делает быстрее и лучше.
Фреймворк VUE JS: быстрый старт
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Простое создание универсальных приложений
Одно из главных достоинств заключается в том, что фреймворк облегчает создание универсальных приложений. Последние написаны на JavaScript, причем скрипты используются как на стороне клиента, так и на стороне сервера.
Многие современные JavaScript-фреймворки, такие как Vue, нацелены на создание одностраничников (SPA). У SPA есть много преимуществ, по сравнению с традиционным веб-сайтом. Например, вы можете создать очень высокоскоростной пользовательский интерфейс, который быстро обновляется.
Но у SPA также есть свои недостатки — например, длительное время загрузки. Google борется с ними, потому что изначально на странице нет контента для сканирования в целях SEO. Все содержимое генерируется с помощью JavaScript по факту.
Универсальное приложение подразумевает наличие SPA, но вместо пустой страницы index.html вы предварительно загружаете свое творение на веб-сервер. Также отправляете визуализированный HTML в качестве ответа на запрос браузера для каждого роута. Это помогает ускорить загрузку и улучшить SEO, упрощая для Google сканирование страницы.
Создание универсальных сервисов может быть утомительным, потому что вы должны выполнить большую настройку как на стороне сервера, так и на стороне клиента. Это проблема, которую Nuxt стремится решить для Vue. Фреймворк позволяет легко обмениваться кодом между клиентом и сервером, чтобы вы могли сосредоточиться на логике вашего приложения.
Он предоставляет вам доступ к свойствам — таким как Server и Client — в ваших компонентах, чтобы вы могли легко решить, будете ли вы рендерить что-то на клиенте или на сервере. Существуют также специальные компоненты, такие как no-ssr, который используется для преднамеренного предотвращения рендеринга на стороне сервера.
Статический рендеринг
Самое большое новшество приходит с командой nuxt generate. Она полностью генерирует статическую версию вашего сайта. Фреймворк создаст HTML для каждого из ваших роутов и поместит его в свой собственный файл.
Преимущества такого подхода очень похожи на достоинства универсальных приложений. Там есть разметка, необходимая для того, чтобы ускорить загрузку страницы, а также помочь поисковикам и сканерам в социальных сетях сканировать сайт. Разница в том, что вам больше не нужен сервер. Все генерируется на этапе разработки.
Это очень мощно, потому что вы получаете преимущества универсального рендеринга без необходимости в сервере. Вы можете просто разместить свое творение на страницах GitHub или Amazon S3.
Автоматическое разбиение кода
Фреймворк может генерировать статическую версию вашего сайта со специальной конфигурацией Webpack. Для каждого статически генерируемого роута (страницы) он также получает свой собственный файл JavaScript, содержащий только код, необходимый для запуска.
Это действительно может помочь со скоростью, потому что размер файла JavaScript остается небольшим, по сравнению с размером всего приложения.
Отличная структура проекта по умолчанию
Во многих небольших приложениях Vue вы управляете структурой кода, в лучшем случае, в нескольких файлах. Структура Nuxt.js по умолчанию дает вам отличный старт для организации вашего сервиса в понятной форме.
Вот несколько основных каталогов, с которыми он настраивается:
components — папка, позволяющая упорядочить отдельные компоненты Vue;
Фреймворк VUE JS: быстрый старт, первые результаты
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
layouts — папка для размещения основных макетов приложений;
store — папка для хранения всех файлов Vuex Store вашего приложения.
Компиляция ES6/ES7 без дополнительной работы
Помимо Webpack, Nuxt.js также поставляется в комплекте с Babel. Последний обрабатывает компиляцию последних версий JavaScript — таких как ES6 и ES7 — в код, который можно запускать в старых браузерах.
Автоматически обновляемый сервер для легкой разработки
Nuxt.js — это удобный инструмент, который позволяет быстро создавать действительно сложные приложения. Если вам необходима высокая результативность SEO, или у вас проблемы с обработкой сложных приложений только с помощью Vue, то вам стоит попробовать этот вспомогательный фреймворк.
Он обеспечивает отличную файловую структуру, улучшает роутинг, обеспечивает рендеринг на стороне сервера и позволяет создавать универсальные сервисы. Вы можете сделать все это самостоятельно, но такой подход всегда требует времени, и иногда для него необходимы действительно хорошие навыки.
Вот для чего нужен Nuxt — создать что-то отличное, сложное и хорошо работающее, не тратя время на подготовку. С этим фреймворком вы просто генерируете шаблон — и все, самая сложная работа делается практически без вашего участия.
Видео презентация курса «Фреймворк Nuxt.js. Руководство по Full-Stack разработке»
Nuxt что это такое
Что такое Nuxt.js?
Nuxt.js — это фреймворк для универсальных приложений на Vue.js.
Основной задачей этого фреймворка является рендеринг пользовательского интерфейса в условиях абстракции от клиент-серверной архитектуры.
Наша цель — создать фреймворк настолько гибкий, чтобы его можно было использовать и как основу, и как дополнение к уже существующим проектам на Node.js.
Nuxt.js содержит все необходимые конфигурационные заготовки, позволяющие сделать разработку приложений с серверным рендерингом на Vue.js лёгкой и приятной.
Кроме того, мы также предоставляем другую опцию разработки: nuxt generate. С помощью неё можно статически генерировать приложения на Vue.js. На наш взгляд, эта опция может оказаться следующим большим шагом на пути разработки микросервисных веб-приложений.
Как фреймворк, Nuxt.js привносит множество возможностей, помогающих разработке, таких как: асинхронные данные, middleware, шаблоны и др.
Как это работает
Nuxt.js использует следующие элементы для создания современных веб-приложений:
Общий размер составляет всего лишь 28kb min+gzip (31kb при использовании vuex).
Под капотом мы используем Webpack с vue-loader и babel-loader для сборки, разделения и минимизации кода.
Возможности
Серверный рендеринг
Nuxt.js можно использовать как фреймворк для организации всех этапов рендеринга UI в вашем проекте.
Выполнение команды nuxt запускает сервер разработки, поддерживающий горячую замену модулей и полностью сконфигурированный серверный рендеринг вашего приложения.
Взгляните на документацию имеющихся команд, чтобы узнать больше.
Если же сервер у вас уже есть, Nuxt.js можно включить как middleware — ограничений нет никаких. См. руководство по программному использованию Nuxt.js.
Статическая генерация
Большая инновация Nuxt.js скрыта в команде nuxt generate.
Эта команда генерирует HTML-представление для каждого маршрута и сохраняет их в соответствующие файлы.
Таким образом, появляется возможность размещения созданного приложения на статическом хостинге!
Сам данный сайт, сгенерированный статически и размещённый на GitHub Pages, является отличным примером этого подхода:
Генерировать HTML вручную при каждом обновлении репозитория документации мы, разумеется, не хотим, так что каждый пуш вызывает лямбда-функцию AWS, которая:
1. Клонирует репозиторий nuxtjs.org
2. Устанавливает зависимости через npm install
3. Вызывает nuxt generate
4. Пушит получившуюся папку dist в ветку gh-pages
Таким образом, у нас теперь есть безсерверное статически-генерируемое веб-приложение 🙂
Неудержимая мысль влечёт нас дальше: представьте интернет-магазин, созданный посредством nuxt generate и размещённый на CDN. Каждый раз, когда товар заканчивается на складе, мы регенерируем приложение, но если во время этого процесса кто-то использует наше приложение — всё будет актуально благодаря запросам к API интернет-магазина. Больше нет нужды во множественных серверах и кешировании!
Создаем интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 1
Статья ориентированна на людей, которые уже имеют понимание работы Vue, на котором основан Nuxt, поэтому я буду заострять внимание только на специфических для Nuxt вещах. Но даже если вы не знакомы с ними, то статья даст общее представление как выглядит проект с Nuxt.
Вы сможете почерпнуть полезные хаки, плагины и способы решения проблем, которые часто возникают при создании Nuxt приложений.
В этой статье я хочу поделиться как создать примитивный интернет-магазин:
Для упрощения восприятия процесса в этой статье не будет разбираться создание backend api, так как эта тема довольно объёмная и тянет на отдельную статью.
Введение
Преимущество прогрессивных (PWA) фреймворков вроде Nuxt.js в том, что:
Структура интернет магазина:
Возможности приложения:
Установка Nuxt
И так начнем. Я буду использовать Node v12.16.1 и Yarn v1.22.0.
Создаем папку, открываем её вставляем package.json такого содержания и прописываем в консоли yarn install
devDependencies не обязательны, но полезны для автоматического форматирования кода и линтинга.
Теперь по порядку о каждом пакете:
Структура проекта
Создаём layout
Мы должны задать дефолтную страницу и layout, чтобы для начала хотя бы отрендерить корень сайта.
В layouts создаём файл, который будет шаблоном по умолчанию, если явно не задан другой.
Пока что в теге template мы имеем слот в который Nuxt будет рендерить контент каждой страницы с layout по умолчанию. Позже мы вернёмся и добавим туда шапку и футер.
У нас есть одно computed свойство meta(), мы его создали на будущее для того, чтобы можно было задать некоторые мета-теги по умолчанию в зависимости от условий.
В этом свойстве можно обратиться в глобальное хранилище Vuex и например взять информацию о покупателе и его устройстве и на основе этой информации задать метатеги для всех страниц.
Далее свойство head(), которое вызывает Nuxt у всех страниц и шаблонов. В него мы передаём метатеги, а так же задаём канонически ссылки для сайта.
В данном случае не будем мудрить, и вернем просто объект. Который Nuxt отрендерит в это:
data-n-head=»ssr» Служебный атрибут на который можно не обращать внимание.
data-hid=»description» Ранее, в объекте, мы указали свойство hid: ‘description’. Оно не является обязательным, но говорит Nuxt присвоить этому конкретному тегу уникальный id, для того, чтобы позже мы могли на других страницах этот тег менять, обращаясь к нему по id. Это очень полезно так как description в layout задан стандартный и для каждого товара и категории товаров он будет своим уникальным (что нужно для SEO).
link: [< rel: 'canonical', href: canonical >] Очень полезно задавать каноническую ссылку потому, что по умолчанию все страницы в Nuxt регистронезависимые и «слешнезависимые», а это создаёт ненужные нам дубликаты в индексе поиска.
Этим тегом мы динамически задаём тег canonical для всех страниц использующих стандартный шаблон. Технически это не уберёт возможность обращаться к страницам по-разному.
Например, site.com/product/myProduct, site.com/product/myProduct/, site.com/product/MyProduct/ будут разным адресами одной и той же страницы, но у всех их будет одинаковый canonical, что уберёт дубликаты из индекса поисковика.
Для удобства можно вынести эту функцию в отдельный файл, но пока оставим это так для наглядности.
Так же вы могли заметить закомментированный тег в script. Эту вещь можно смело раскомментировать во время дебага. Зашли на сайт с телефона и автоматически открылась консоль браузера на телефоне. Очень удобно так как можно не прибегать к более сложным инструментам отладки и экономить себе время.
Создаём страницу
Мы создали шаблон, создадим и корневую страницу. В папке pages создаём index.vue
Здесь особо нечего комментировать, выглядит как обычный Vue компонент, который будет отображаться в открытии корня сайта. Позже мы его изменим.
Конфигурация Nuxt
Теперь дадим Nuxt инструкцию как готовить наш сайт. В корне проекта создаём файл nuxt.config.js
Теперь подробно остановимся на каждом пункте конфига
Импортируем 2 пакета, которые позже Webpack будет использовать для обработки и сжатия изображений.
Для удобства создаём константу, которую будем использовать в качестве флага на некоторых пунктах конфига.
Задаём явно, что мы хотим получить SSR приложение (а не SPA).
Используем ES6 синтаксис для динамического расширения объекта. В данном случае !isDev означает, что modern: ‘client’ свойство объекта будет добавлено только в production. modern: ‘client’ говорит Nuxt создать 2 бандла, один из которых использует ES6 Modules синтаксис поддерживаемый последними браузерами, а второй Legacy транспилированный через Babel. В html будет по 2 тега на каждый js скрипт вида:
Компонент будет получать данные из родительского, это позволит сделать его dump (глупым) и уменьшает сложность приложения. То есть он не работает с API или глобальным состоянием.
И хотя в dom это обычный a href, но на нём висят обработчики кликов и IObserver. Поэтому даже если у пользователя отключен JS в браузере, он сможет переходить по ссылкам и получать отрендеренный контент с сервера.
Перепишем корневой index.vue
Теперь мы хотим отобразить этот компонент на главной странице сайта.
Импортируем наш список категорий используя
, что означает абсолютный путь.
Нам нужно получить глобальное состояние в котором храниться список категорий.
Через обвертку получаем в страницу объект categories привязанный к глобальному состоянию categoriesList
Выводим этот компонент, передавая ему в props объект categories
Запускаем сервер
При нажатии на категорию nuxt пытается найти маршрут, но он его не найдет. Давайте создадим для каждой категории свой маршрут.
Создаём страницу категории
В папке pages создаём папку category и в ней файл с именем _CategorySlug.vue такого содержания:
Название файла должно начинаться с _, чтобы Nuxt понял, что это динамический маршрут.
Когда мы переходим на страницу http://127.0.0.1:3000/category/cats
Мы можем обратиться к объекту route таким образом route.params.CategorySlug (без нижнего подчеркивания), которое будет равным cats
В этом файле все аналогично index.vue, но есть пару отличий
Мы вызываем actions, который мы создадим в следующем шаге, но вторым аргументам передаём вышеупомянутый объект route.
Прописываем для этой страницы Title и Meta description, которые мы получаем из API.
Изменяем Vuex
getCurrentCategory в этом action на основании текущего route мы ищем нужную категорию и добавляем её в state.
Запускаем
Теперь наши маршруты работают.
Создаём товары для категорий
Я использовал первый попавшийся генератор JSON с такими настройками. 
Полученный файл кладем в static/mock. Nuxt предоставляет публичный доступ к файлам, которые лежат в папке static. Поэтому мы сможем подтянуть наши товары используя Axios.
Для начала изменим наш Vuex к такому виду:
Чтобы их отрендерить создадим компонент ProductBrief.vueв components/category.
Это dump компонент, который будет являться карточкой товара.
Изменим нашу страницу категории
Теперь она будет рендерить все товары в категории в таком виде.
Всё хорошо, но в категории 150 товаров и это напрягает мой мобильный интернет, который пытается загрузить все картинки. Давайте сделаем загрузку ленивой.
Для этого в plugins добавим
В котором мы указываем индикатор загрузки и placeholder в случае, если картинка не доступна на сервере.
Подключаем плагин в nuxt.config.js
И меняем наш img srcна
Так же добавляем стиль
Анимированый индикатор загрузки и ленивая загрузка. Мой смартфон выдохнул.
Итоги
Спасибо всем кто прочитал статью. Это просто практический пример использования Nuxt. В реальном проекте нужно исходить из бизнес-логики, структуры данных и тд. тп, а этот проект далек от реальности.
В продолжении мы будем наращивать функционал сайта, так как пока что он никуда не годится.
Nuxt.js: минималистичный фреймворк для создания универсальных приложений Vue.js
Универсальный (или изоморфный) — это термин, который стал очень распространенным в сообществе JavaScript. Он используется для описания кода JavaScript, который может выполняться как на клиенте, так и на сервере.
Многие современные JavaScript-фреймворки, такие как Vue.js, нацелены на создание одностраничных приложений (SPA). Это сделано для того, чтобы улучшить взаимодействие с пользователем и сделать приложения более быстрыми, поскольку пользователи хотят видеть обновления страниц мгновенно. Эти приложения называются приложения с рендерингом на стороне клиента. Хотя у этих приложений есть множество преимуществ, у них также есть два ключевых недостатка, первое длительное время первоначальной загрузки до момента отображение контента, и второй когда браузер получает код JavaScript, некоторые роботы поисковых систем или роботы социальных сетей не могут увидеть весь загруженный контент, при сканирование веб-страниц.
С другой стороны рендеринг на стороне сервера подразумевает предварительную загрузку приложений JavaScript на веб-сервере и отправку визуализированного HTML-кода в качестве ответа на запрос браузера на страницу. Создание подобных приложений может быть немного утомительным, так как требуется много настроек, прежде чем вы начнете кодировать. Эту проблему Nuxt.js стремится решить для приложений Vue.js.
Что такое Nuxt.js
Проще говоря, Nuxt.js — это инфраструктура, которая помогает вам легко создавать серверные приложения Vue.js. Он абстрагирует большую часть сложной конфигурации, связанной с управлением такими вещами, как асинхронные данные, промежуточное программное обеспечение (middleware) и маршрутизация. Это похоже на Angular Universal для Angular и Next.js для React.
Согласно документации Nuxt.js, — Его основной сферой применения является предоставление пользовательского интерфейса при абстрагировании от распределения клиент/сервер.
Статическая генерация
Еще одной замечательной особенностью Nuxt.js является его способность генерировать статические веб-сайты с помощью команды generate. Это довольно круто, и предоставляет функции, подобные популярным инструментам генерации статики, таким как Jekyll.
Под капотом Nuxt.js
В дополнение к Vue.js 2.0, Nuxt.js включает в себя следующее: Vue-Router, Vuex (включается только при использовании опции хранилища store option), Vue Server Renderer и vue-meta. Это замечательно, так как избавляет от необходимости вручную включать и настраивать различные библиотеки, необходимые для разработки приложения Vue.js. Nuxt.js делает все это из коробки, сохраняя общий размер 57kB min + gzip (60KB с vuex).
Nuxt.js также использует webpack с vue-loader и babel-loader для сборки, разделения кода (code-split) и минимизации кода.
Как это работает
Вот что происходит, когда пользователь посещает приложение Nuxt.js или переходит на одну из его страниц через :
Эти действия выполняются по этой схеме, взятой из документации Nuxt:
Создание бессерверного статического сайта с Nuxt.js
В этой статье мы создадим простой статически сгенерированный блог с Nuxt.js. Мы предполагаем, что наши сообщения будут извлекаться по API, которое будем имитировать статическим файлом JSON.
Мы предполагаем что у вам базовые знания Vue.js. Если нет вы можете ознакомиться с великолепным руководством по началу работы с Vue.js 2.0 Джека Франклина.
Наше финальное приложение будет выглядеть как то так:
Весь код этой статьи можно увидеть на GitHub, а демо можно посмотреть здесь.
Начальная настройка приложения
Самый простой способ начать работу с Nuxt.js — это использовать шаблон, созданный командой Nuxt. Мы можем быстро установить его в наш проект (ssr-blog), используя vue-cli:
После того, как вы запустите эту команду, откроется приглашение и вам будут заданы несколько вопросов. Вы можете нажать Return, чтобы принять ответы по умолчанию, или ввести свои собственные значения.
Далее мы устанавливаем зависимости проекта:
Теперь мы можем запустить приложение:
Если все пойдет хорошо, вы сможете перейти на http://localhost:3000 и увидеть начальную страницу шаблона Nuxt.js. Вы даже можете просмотреть исходники страницы, чтобы увидеть, что весь контент, сгенерированный на странице.
Далее нам нужно сделать несколько простых настроек в файле nuxt.config.js:
В приведенном выше файле конфигурации мы просто указываем шаблон заголовка, который будет использоваться для всего приложения, с помощью опции titleTemplate.
Мы также подключили мой текущий CSS-фреймворк, Bulma, чтобы воспользоваться некоторыми предустановленными стилями. Это было сделано через опцию link.
Примечание. Nuxt.js использует vue-meta для обновления заголовков и атрибутов HTML приложений.
Теперь мы можем сделать следующие несколько шагов, добавив страницы и функции нашего блога.
Работа с макетами страниц (Page Layouts)
Во-первых, мы определим пользовательский базовый макет для всех наших страниц. Мы можем расширить основной макет Nuxt.js, обновив файл layouts/default.vue:
Компонент действительно очень важен при создании макета, так как именно он отображает компонент страницы.
Также здесь возможно сделать еще несколько вещей — например, определить пользовательские шаблоны документов и схемы ошибок — но мы не будем это делать так как они не нужны для нашего простого блога. Я призываю вас ознакомиться с документацией Nuxt.js по представлениям, чтобы узнать обо всех возможностях.
Простые страницы и маршруты
Страницы в Nuxt.js создаются как отдельные файловые компоненты в каталоге страниц pages. Nuxt.js автоматически преобразует каждый файл .vue в этом каталоге в маршрут приложения.
Создание домашней страницы блога
Далее добавим домашнюю страницу нашего блога, обновив файл index.vue, сгенерированный шаблоном Nuxt.js в каталоге pages:
Как указывалось ранее, указание опции title здесь автоматически вводит ее значение в значение titleTemplate перед рендерингом страницы.
Теперь мы можем перезагрузить наше приложение, чтобы увидеть изменения на главной странице.
Создание страницы About
Еще одна замечательная особенность Nuxt.js в том, что он будет мониторит изменения файлов внутри каталога pages, поэтому нет необходимости перезапускать приложение при добавлении новых страниц.
Мы можем проверить это, добавив простую страницу about.vue:
Теперь мы можем зайти по адресу http://localhost:3000/about, и увидеть страницу about, без необходимости перезапускать приложение.
Отображение сообщений блога на главной странице
Наша текущая домашняя страница довольно проста, так что нам нужно сделать ее лучше, отобразив на ней последние сообщения из блога. Мы сделаем это, создав компонент
и разместив его на странице index.vue.
Но сначала мы должны получить сохраненные записи в блоге в виде JSON и поместить этот файл в корневой папке приложения. Файл можно скачать отсюда, или вы можете просто скопировать JSON ниже и сохранить в корневой папке как posts.json:
Примечание: в идеале сообщения должны быть получены по API из внешнего ресурса. Для этого можно использовать какой нибудь внешний сервис, например, Contentful
Компоненты размещаются в каталоге components. Там мы создадим отдельный файловый компонент
Мы импортируем данные записей из сохраненного файла JSON и присваиваем их значению posts в нашем компоненте. Затем мы перебираем все записи в шаблоне компонента с помощью директивы v-for и отображаем нужные нам атрибуты записи.
Примечание. Символ
является псевдонимом для корневого каталога /. Вы можете просмотреть документацию здесь, чтобы узнать о различных псевдонимах, которые предоставляет Nuxt.js, и с какими каталогами они связаны.
Затем мы добавляем компонент
на домашнюю страницу:
Добавление динамических маршрутов
Теперь мы добавим динамические маршруты для сообщений, чтобы мы могли получить доступ к выбранному сообщению, например, с помощью этого URL: /post/1.
Для этого мы добавим каталог post в каталог pages и структурируем его следующим образом:
Такое расположение каталогов автоматически сгенерирует соответствующие динамические маршруты для приложения:
Обновим файл выбранного сообщения ./pages/post/_id/index.vue:
Nuxt.js добавляет некоторые пользовательские методы для компонентов нашей страницы, чтобы упростить процесс разработки. Посмотрите, как мы используем некоторые из них на странице выбранного поста:
Отлично, теперь мы можем снова посетить наш блог, чтобы увидеть, что все маршруты и страницы работают должным образом, а также просмотреть исходный код страницы, чтобы увидеть генерируемый HTML. У нас есть функциональное серверное JavaScript-приложение.
Генерация статических файлов
Далее мы можем сгенерировать статические HTML-файлы для наших страниц.
Нам нужно сделать небольшую настройку, поскольку по умолчанию Nuxt.js игнорирует динамические маршруты. Чтобы сгенерировать статические файлы для динамических маршрутов, нам нужно явно указать их в файле ./nuxt.config.js.
Мы будем использовать функцию обратного вызова, чтобы получить список наших динамических маршрутов:
Чтобы сгенерировать все маршруты, мы можем запустить эту команду:
Nuxt сохраняет все созданные статические файлы в папке dist.
Вы можете почитать документацию по использованию всех свойств команды generate.
Развертывание на хостинге Firebase
В качестве последнего шага мы можем воспользоваться хостингом от Firebase, чтобы наш статический веб-сайт заработал за пару минут. Этот шаг предполагает, что у вас есть учетная запись Google.
Во-первых, установите Firebase CLI, если у вас его еще нет:
Чтобы подключить локальный компьютер к учетной записи Firebase и получить доступ к проектам Firebase, выполните следующую команду:
Эта команда должно открыть окно браузера и предложит вам войти. После того, как вы вошли в систему, перейдите на страницу https://console.firebase.google.com и нажмите Добавить проект (Add project). Сделайте соответствующий выбор в открывшемся мастере.
После создания проекта перейдите на страницу хостинга проекта по адресу https://console.firebase.google.com/project/
/hosting и завершите работу с мастером начала работы.
Затем на своем ПК из корневого каталога вашего проекта выполните следующую команду:
В появившемся мастере выберите «Хостинг» (Hosting). Затем выберите ваш недавно созданный проект из списка вариантов. Затем выберите каталог dist в качестве публичного каталога. Выберите, настроить страницу как одностраничное приложение и, наконец, выберите «Нет», когда вас спросят, хотите ли вы перезаписать dist/index.html.
Firebase запишет пару файлов конфигурации в ваш проект, а затем запустит веб-сайт по адресу https://
.firebaseapp.com. Демо-приложение для этой статьи можно увидеть на nuxt-ssr-blog.firebaseapp.com.
Если у вас возникнут проблемы, вы можете найти подробные инструкции на странице быстрого запуска Firebase.