Nuxt.jsのFull Staticがすごい

投稿日 : 2020/6/27 | 0 日前

文字数(だいたい) : 2177

本題
こんなん読んでられんわ
何ができるようになるの？
Nuxt.jsのアップデート
package.json 開いて
package-lock.json ファイルと node_modules フォルダを消す
npm install を実行
こける
nuxt.config.js を開く
nuxt build && nuxt export
npm run generate 実行
怖くないルーティング
静的生成したサイトを確認できる機能
おまけ
Vuetifyが変わった？
おわりに
参考にしました。

歯磨きしたら血が出た。ちょっとびっくりした

本題

Nuxt.jsの2.13から完全な静的生成機能がついた模様。
むしろ今までは完全ではなかったのか？って話でよくわからないけど、この中にあるルーティング自動生成が多分強い。

詳しくはこれ
本家ブログ

こんなん読んでられんわ

1.Nuxt.jsをアップデートする
2.nuxt.config.jsにこんな感じでtarget:staticを指定

export default {
  // 静的サイト書き出し。universalとstatic入れてね
  mode: 'universal',
  target: 'static',
}

3.package.jsonのgenerateスクリプトを以下に変更

"scripts": {
  "generate": "nuxt build && nuxt export",
}

4.npm run generateを実行する。distフォルダができる。おつかれ様です。
おまけ：npx nuxt serveで静的生成したサイトをすぐに確認できるようになりました。

何ができるようになるの？

新しくなった静的生成
- nuxt generateから
- nuxt build && nuxt exportへ
怖くないルーティング
- 勝手にページを解析し、リンクを自動で見つけて勝手に生成します。
- どういうことかと言うと、以下のJSの用にgenerate.routesを書く必要がもうないということです。コメントと化した結構重要（多分一番めんどい）な部分

export default {
  generate: {
    // routes: generateRoutes, // 生成する
    dir: 'docs'
  },
}

Nuxt.jsのアップデート

2.0から2.13へ上げます。

package.json 開いて

dependenciesの中のnuxtを^2.13.1にします。以下は一例

"dependencies": {
  "@nuxtjs/google-analytics": "^2.3.0",
  "@nuxtjs/markdownit": "^1.2.9",
  "@nuxtjs/pwa": "^3.0.0-0",
  "markdown-it-footnote": "^3.0.2",
  "markdown-it-highlight": "^0.2.0",
  "nuxt": "^2.13.1"
},

なお私もよく分かっていない。^←これなに？

package-lock.json ファイルと node_modules フォルダを消す

npm installで再召喚するので大丈夫

npm install を実行

npm installを実行します。
おそらくおま環だろうけど私の環境では管理者権限ないとできませんでした。

こける

まあうまく行かないよね

Unexpected end of JSON input while parsingなんとか
- 管理者権限でcmd等を開いてnpm cache clean --forceを実行する。何してるか分かってるよな？ って言われた。分からない
  npm WARN using --force I sure hope you know what you are doing.

nuxt.config.js を開く

開いたら、静的生成して＾～ってNuxtに伝えます。
target:staticを追加します。

export default {
  // 静的サイト書き出し。universalとstatic入れてね
  mode: 'universal',
  target: 'static',
}

nuxt build && nuxt export

package.jsonを開いて、scriptにある、generateを書き換えます。

"scripts": {
  "generate": "nuxt build && nuxt export",
}

npm run generate 実行

すると生成されます。お疲れ様でした～

怖くないルーティング

今回のNuxt.jsさんは、勝手にリンクを見つけてリンクの分だけ生成するようになったのでもう不要です。
いやールーティング面倒だったのでこれはとてもありがたい。

一応、nuxt.config.jsで明示的に無効にする（generate.crawler: false）ことで旧仕様（generate.routes）を利用できるっぽい。

静的生成したサイトを確認できる機能

本番環境（私ならNetlify）に公開された場合どんな感じに見れるのか（多分変わらんと思うけど）を確認できる機能が付きました。

一度きりなら
- npx nuxt serve（package.jsonにscript書かなくても、npx使えば直接使える）
package.jsonに書くなら

"scripts": {
  "staticdev": "nuxt serve",
}

実行はnpm run staticdev（別にstaticdevって名前である必要はない。みんなはかっこいい名前をつけてあげよう）

おまけ

Vuetifyが変わった？

v-contentからv-mainになった模様

あと強制上書きCSSがまた動かなくなってた（力技やめとけ）
それでふとSCSSってやつでVuetifyが適用するCSSの内容変えられるやんって思って見てみると、あるんですね～

// Vuetifyが勝手に色つける問題
$code-background-color: '#000000';

code-background-colorなんていつの間に追加してたの？

また今度やろうと思います

おわりに

npxなんて便利な機能あったんですね（え）

参考にしました。

Going Full Static · Nuxt Blog

Long awaited features for JAMstack fans has been shipped in v2.13: full static export, improved smart prefetching, integrated crawler, faster re-deploy, built-in web server and new target option for config ⚡️