コマンドと開発

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:3000hot module replacement を使って開発モードで Nuxt を起動するためには、以下のコマンドを実行します:

Yarn
yarn dev
NPM
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
yarn build
NPM
npm run build

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

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

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

Yarn
yarn start
NPM
npm run start

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

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

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

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

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

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

警告: Nuxt v2.12 以下を使う場合、動的ルートは generate コマンドによって無視されます: API Configuration generate
nuxt generate を使ってウェブアプリケーションを生成する場合、asyncData fetch に与えられる context reqres を持ちません。

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

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

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

この次は?

このページをGitHubで編集する 更新日 Thu, Oct 21, 2021