LoginSignup
4
2

More than 1 year has passed since last update.

@mt877

【Nuxt.js】ビルドのプロパティとコマンドまとめ

Last updated at Posted at 2021-05-16

概要

Nuxt.jsでSPA（SSR・SSG）を制作するときのssr / targetプロパティや、ビルドコマンドあたりの理解がふわふわしていたので整理します。
現在では非推奨となったmodeプロパティについては特に記述しません。

環境

  • Nuxt.js v2.15.6

ssr / targetプロパティ

nuxt.config.js
export default {
  ssr: true, // デフォルト
  target: 'server' // デフォルト
}
  • ssr：サーバーサイドレンダリングを有効にするかどうか
  • target：サーバーホスティングにするか静的ホスティングにするか

build / generateコマンド

package.json
{
  "scripts": {
    "build": "nuxt build",
    "generate": "nuxt generate",
  }
}
  • build：target: 'server'のときに使用
    • .nuxtディレクトリに出力されます。
  • generate：target: 'static'のときに使用
    • distディレクトリに出力されます。

まとめ

SSRでつくるとき

  • プロパティの設定
    • ssr: true ・ target: 'server'
  • 使用するコマンド
    • nuxt build
      • .nuxtディレクトリに出力されます。

SSGでつくるとき

  • プロパティの設定
    • ssr: true ・ target: 'static'
  • 使用するコマンド
    • nuxt generate
      • distディレクトリに出力されます。

SPAでつくるとき

  • プロパティの設定
    • ssr: false ・ target: 'static'
    • ssr: false ・ target: 'server'
      • ssr: falseに設定しているとビルド時にtargetがstaticに変換されます。
  • 使用するコマンド
    • nuxt generate
      • distディレクトリに出力されます。

参考URL

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
2