コマンドと開発
Nuxt は開発と運用両方に役立つ一連のコマンドを用意しています。
![](/_nuxt/image/95923b.jpg)
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
ディレクトリを作成するので、ホスティングしているサーバーにデプロイする準備ができています。
.npmignore
または .gitignore
に .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
コマンドを使う際それらのリンクに基づいてルートを生成します。
generate
コマンドによって無視されます: API Configuration generate エラー時の失敗(Fail on Error)
ページエラーが発生した際にゼロ以外のステータスコードを返し、CI/CD のデプロイまたはビルドに失敗するようにするには --fail-on-error
引数を使います。
yarn generate --fail-on-error
npm run generate --fail-on-error
この次は?
![Sébastien Chopin](/_nuxt/image/e847b9.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/d0b78e.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)