コマンドと開発

Nuxt.js は開発と運用両方に役立つ一連のコマンドを用意しています。

package.json を使う

これらのコマンドは package.json に記述する必要があります:

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

次に yarn <command> または npm run <command> を介してコマンドを起動できます(例: yarn dev / npm run dev)。

開発環境

http://localhost:3000hot module replacement のついた開発モードで Nuxt を起動するには:

yarn dev
npm run dev

コマンド一覧

ターゲットに応じて異なるコマンドを実行できます:

target: server(デフォルト値)

  • nuxt dev - 開発サーバーを起動します。
  • nuxt build - 本番用の webpack を使用してアプリケーションをビルドおよび最適化します。
  • nuxt start -(nuxt build を実行した後に)本番サーバーを起動します。Heroku や Digital Ocean などの Node.js ホスティングに使用します。

target: static

  • nuxt dev - 開発サーバーを起動します。
  • nuxt generate -(必要に応じて)アプリケーションをビルドし、すべてのルートを HTML ファイルとして生成し、dist/ ディレクトリに静的にエクスポートします(静的ホスティングに使用されます)。
  • nuxt start - 静的ホスティング(Netlify、Vercel、Surge など)と同じように dist/ ディレクトリを提供します。デプロイ前のテストに最適です。

Webpack の設定を検査

vue inspect のように、nuxt がプロジェクトをビルドする際に使用する webpack の設定を検査することができます。

  • nuxt webpack [query...]

引数:

  • --name: 検査するバンドル名。(client、server、modern)
  • --dev: 開発用の webpack の設定を検査します。
  • --depth: 出力する深さ。冗長に出力されないように、デフォルトでは 2 が設定されています。
  • --no-colors: ANSI カラーを無効にします。(TTY が使用できない場合、またはファイルへパイプしている場合は、デフォルトで無効になります)

例:

  • nuxt webpack
  • nuxt webpack devtool
  • nuxt webpack resolve alias
  • nuxt webpack module rules
  • nuxt webpack module rules test=.jsx
  • nuxt webpack module rules test=.pug oneOf use.0=raw
  • nuxt webpack plugins constructor.name=WebpackBar options reporter
  • nuxt webpack module rules loader=vue-
  • nuxt webpack module rules "loader=.*-loader"

プロダクション開発

Nuxt.js では、サーバーデプロイと静的デプロイのどちらかを選択することができます。

サーバー開発

SSR アプリケーションをデプロイするためにデフォルト値である target: 'server' を使います。

yarn build
npm run build

Nuxt.js はすべてのものが含まれる .nuxt ディレクトリを作成するので、ホスティングしているサーバーにデプロイする準備ができています。

.npmignore または .gitignore.nuxt を入れることをおすすめします。

一度アプリケーションがビルドされると、start コマンドを使ってアプリケーションの本番バージョンを確認することができます。

yarn start
npm run start

静的デプロイ(プリレンダリング)

Nuxt.js を使うと、どんな静的なホスティング上でもウェブアプリケーションをホストすることができます。

静的に生成されたサイトをデプロイするには、nuxt.config.jstarget:static を指定していることを確認してください(Nuxt v2.13 以上):

nuxt.config.js
export default {
  target: 'static'
}
yarn generate
npm run generate

Nuxt.js はすべてのものが含まれる dist/ ディレクトリを作成するので、静的なホスティングサービスにデプロイする準備ができています。

Nuxt v2.13 ではリンクタグをクロールするクローラーがインストールされているので、nuxt generate コマンドを使う際それらのリンクに基づいてルートを生成します。

警告: Nuxt v2.12 以下を使う場合、動的ルートは generate コマンドによって無視されます: generate プロパティのドキュメント

nuxt generate を使ってウェブアプリケーションを生成する場合、asyncDatafetch に与えられる contextreqres を持ちません。

エラー時の失敗(Fail on Error)

ページエラーが発生した際にゼロ以外のステータスコードを返し、CI/CD のデプロイまたはビルドに失敗するようにするには --fail-on-error 引数を使えます。

yarn generate --fail-on-error
npm run generate --fail-on-error

このあとは

FAQ で人気のホストへのデプロイ例を参照してください。

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する