コマンドと開発

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

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:3000 で hot 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 では、サーバーデプロイと静的デプロイのどちらかを選択することができます。

サーバー開発

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

yarn build

npm run build

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

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

yarn start

npm run start

静的デプロイ（プリレンダリング）

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

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

export default {
  target: 'static'
}

yarn generate

npm run generate

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

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

エラー時の失敗（Fail on Error）

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

yarn generate --fail-on-error

npm run generate --fail-on-error

この次は？