Команды для запуска Nuxt

Введение

Nuxt — это популярный фреймворк для создания приложений на основе Vue, который значительно упрощает работу с серверным рендерингом, статической генерацией и современным фронтенд-стеком. Начав использовать Nuxt, вы сразу же столкнетесь с необходимостью запускать проект в разных режимах: разработка, сборка, предпросмотр, запуск в продакшене и так далее. Каждый из этих режимов требует своей команды. В этой статье вы найдете подробный разбор всех стандартных команд для запуска Nuxt-проектов, узнаете, как ими пользоваться на практике и поймете, какие нюансы стоит учитывать в зависимости от вашей задачи.

Основные команды для запуска Nuxt

Nuxt предоставляет удобный набор CLI-команд, позволяющих запускать проект в различных режимах. Давайте рассмотрим каждую из них подробно.

Установка Nuxt

Перед тем как использовать какие-либо команды, убедитесь, что Nuxt установлен в вашем проекте. Обычно Nuxt устанавливается через npm или yarn.

Пример с использованием npm:

npm install nuxt
# Если вы хотите установить Nuxt глобально
npm install -g nuxt

Пример с использованием yarn:

yarn add nuxt
# Установка глобально
yarn global add nuxt

Убедитесь, что нужная версия Node.js установлена в вашей системе — для Nuxt 3 рекомендуется Node.js версии 16 или выше.

Знание команд для запуска Nuxt необходимо для разработки, тестирования и развертывания приложений. Однако, чтобы эффективно использовать эти команды, нужно понимать, как они работают, как настраивать окружение и как оптимизировать процесс сборки. Если вы хотите узнать больше о командах для запуска Nuxt, приходите на наш большой курс Nuxt - fullstack Vue фреймворк. На курсе 129 уроков и 13 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

nuxt dev — запуск в режиме разработки

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

npm run dev

или напрямую:

npx nuxt dev

Что происходит при выполнении команды:

• Запускается локальный сервер разработки (по умолчанию на http://localhost:3000)
• Проект пересобирается автоматически при изменении файлов
• Выводятся подробные сообщения о возможных ошибках прямо в консоль
• Поддерживается горячая перезагрузка (Hot Module Replacement) — страница обновляется без полной перезагрузки

Пример настройки скриптов в package.json:

{
  "scripts": {
    "dev": "nuxt dev"
  }
}

Теперь вы можете просто запускать:

npm run dev

Ключевые параметры:

• --port: изменение порта сервера (например, nuxt dev --port 8080)
• --hostname: изменить хост (например, чтобы открыть доступ с локальной сети)

Показываю вариант:

npx nuxt dev --port 8080 --hostname 0.0.0.0
// Сервер будет доступен по всем IP-адресам, что удобно для тестирования с мобильных устройств

nuxt build — сборка проекта

Когда вы готовы перейти к релизу, проект необходимо собрать. Команда nuxt build компилирует все ресурсы, оптимизирует их и готовит к запуску в продакшене.

Запуск:

npm run build

или:

npx nuxt build

Что делает команда:

• Собирает серверную и клиентскую части приложения
• Оптимизирует ресурсы (JS, CSS, изображения)
• Подготавливает папку .output (Nuxt 3) или .nuxt (Nuxt 2) с результатом сборки

Пример настройки в package.json:

{
  "scripts": {
    "build": "nuxt build"
  }
}

Комментарии:

• После сборки проект не запускается автоматически — для просмотра результата используйте команду nuxt start (о ней ниже)
• Для статических проектов используется команда nuxi generate или старый аналог nuxt generate (см. раздел ниже)

nuxt start — запуск собранного приложения

Когда проект уже собран с помощью nuxt build, следующая команда позволяет запустить его в режиме продакшена.

Запуск:

npm run start

или:

npx nuxt start

Особенности:

• Используется для серверно-рендеренных приложений (SSR/SSG), а не для чисто статических проектов
• Сервер обслуживает уже оптимизированные файлы из папки сборки

Как это выглядит на практике:

{
  "scripts": {
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

Процесс запуска:

1. Сначала выполнили сборку:

   npm run build

2. Затем запустили сервер:

   npm run start

Опции:

• --port, --hostname — работают аналогично режиму dev

Обратите внимание:
Запускать nuxt start без сборки бесполезно — убедитесь, что папка сборки присутствует.

nuxt generate — статическая генерация

Если вы хотите превратить Nuxt-проект в полностью статический сайт (все страницы будут собраны в html-файлы), используйте команду:

npm run generate

или:

npx nuxt generate

Как это работает:

• Все страницы в проекте проходят генерацию и сохраняются как статические файлы (html, css, js)
• Готовые файлы выкладываются в папку .output/public (Nuxt 3) или dist (Nuxt 2)
• Проект можно выкладывать на CDN или размещать как статичный сайт

Пример скрипта:

{
  "scripts": {
    "generate": "nuxt generate"
  }
}

Зачем это нужно:

• Для SEO-оптимизации (страницы становятся доступными ботам)
• Для проектов, не требующих серверной логики на бэкенде (блоги, лендинги, статические каталоги)

nuxt preview — предпросмотр статической сборки

После генерации статического сайта может быть удобно проверить, как он будет работать на сервере. Для этого используется команда предпросмотра:

npm run preview

или:

npx nuxt preview

Что делает команда:

• Локально запускает сервер для папки сгенерированных файлов (так, как это будет работать в продакшене)
• Удобно для проверки ссылок, динамических маршрутов и поведения сайта

Показываю на примере:

{
  "scripts": {
    "preview": "nuxt preview"
  }
}

Порядок работы:

1. Сначала соберите проект:

   npm run generate

2. Затем проверьте его:

   npm run preview

Дополнительные команды и утилиты

nuxt info — получение сведений о сборке

Для диагностики серверной среды и зависимости файла проекта:

npx nuxi info

Что выдает команда:

• Версия Nuxt, Node, Yarn/NPM, список доступных команд, информацию об операционной системе
• Полезно для сбора информации при отладке ошибок или при обращении за помощью

nuxt clean — очистка кэша

Иногда помогает удалить папку .nuxt/.output для чистой сборки:

npx nuxt clean
# или вручную через rm -rf .nuxt .output node_modules

Когда использовать:

• При сбоях в сборке
• После установки новых зависимостей

Изменение стандартных параметров выполнения

Множество команд поддерживает дополнительные параметры запуска. Например:

• --dotenv — указать отдельный .env-файл
• --force — повторный запуск даже если найдены ошибки
• --root — задать путь до корня приложения

Пример:

npx nuxt dev --dotenv prod.env --root ./client

Здесь вы задаете отдельный путь до корня проекта и используете свою конфигурацию окружения.

Использование с Yarn и другими пакетными менеджерами

Если вы предпочитаете yarn, команды абсолютно аналогичны:

yarn dev
yarn build
yarn start
yarn generate
yarn preview

Пример полного scripts-блока в package.json

Чтобы не запутаться в командах, удобно определить их все в package.json.

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "info": "nuxi info",
    "clean": "nuxi clean"
  }
}

Теперь вам не надо вспоминать все параметры — просто вызывайте нужный скрипт.

На заметку: отличия Nuxt 2 и Nuxt 3

• В Nuxt 2 используйте nuxt вместо nuxi, и папки сборки — это .nuxt и dist
• В Nuxt 3 — все команды через nuxi, папки сборки .output и .output/public
• В новых версиях добавлена команда preview и улучшена поддержка статической генерации

Если у вас проект на Nuxt 2, возможны небольшие отличия имен команд, но базовая логика остается прежней.

Заключение

Управление командной строкой — ключ к продуктивной работе с Nuxt-проектами. Nuxt предлагает удобный стандарт команд для простого запуска, сборки и деплоя ваших приложений. От режима разработки с живым обновлением до статической генерации для сайтов любого масштаба — всё делается через несколько простых команд. Поддерживайте актуальность скриптов в вашем package.json и не забывайте о дополнительных опциях для продвинутой настройки. Освоив эти команды, вы будете быстрее тестировать изменения, устранять ошибки и готовить качественный финальный билд для продакшена.

Знание команд для запуска - это базовый навык для разработки на Nuxt, но это лишь первый шаг. Чтобы создавать полноценные fullstack-приложения, необходимо освоить все возможности фреймворка, включая работу с сервером, базами данных и API. На нашем курсе Nuxt - fullstack Vue фреймворк вы найдете все необходимые знания и навыки для достижения успеха. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в Nuxt прямо сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Вопрос 1: Почему команда nuxt dev не запускается и выбрасывает ошибку "Cannot find module 'nuxt'"?

Ответ:
Проверьте, что вы находитесь в корне проекта (там, где лежит package.json). Выполните npm install или yarn, чтобы установить все необходимые зависимости. Если ошибка осталась, возможно, Nuxt не был добавлен как зависимость или установленная версия Node.js несовместима. Проверьте версию Node.js командой node -v и при необходимости обновите.

Вопрос 2: Как изменить порт/хост для серверов Nuxt, если 3000 уже занят?

Ответ:
Передайте параметры через командную строку:
Для разработки: npx nuxt dev --port 4000 --hostname 127.0.0.1
Для продакшена: npx nuxt start --port 8080 --hostname 0.0.0.0
Также можно добавить переменные окружения:
NITRO_PORT=4000 NITRO_HOST=127.0.0.1 npm run dev

Вопрос 3: Команда nuxt generate создает не все страницы, что делать?

Ответ:
Проверьте настройки маршрутов и динамических страниц. Для динамической генерации Nuxt требует список параметров (например, через функцию generate.routes в nuxt.config). Если вы используете Nuxt 3, убедитесь, что данные для генерации доступны в момент сборки.

Вопрос 4: Как запускать Nuxt-проект в Docker-контейнере?

Ответ:
Добавьте в Dockerfile команды npm install, затем npm run build и для старта укажите CMD [ "npm", "run", "start" ]. Не забудьте пробросить нужные порты через опции Docker, например, -p 3000:3000.

Вопрос 5: Как добавить дополнительные параметры в команду запуска, если нужно задать .env-файл или другой путь до папки проекта?

Ответ:
Используйте параметры --dotenv и --root в команде запуска:
npx nuxt dev --dotenv .env.prod --root ./frontend Так вы укажите Nuxt использовать конкретный .env-файл и искать конфигурацию в папке ./frontend.