たくさんの自由帳
Androidのお話
たくさんの自由帳
投稿日 : | 0 日前
文字数(だいたい) : 2177
歯磨きしたら血が出た。ちょっとびっくりした
Nuxt.jsの2.13から完全な静的生成
機能がついた模様。
むしろ今までは完全ではなかったのか?って話でよくわからないけど、この中にあるルーティング自動生成
が多分強い。
詳しくはこれ
本家ブログ
nuxt.config.js
にこんな感じでtarget:static
を指定export default {
// 静的サイト書き出し。universalとstatic入れてね
mode: 'universal',
target: 'static',
}
package.json
のgenerate
スクリプトを以下に変更"scripts": {
"generate": "nuxt build && nuxt export",
}
npm run generate
を実行する。dist
フォルダができる。おつかれ様です。npx nuxt serve
で静的生成したサイトをすぐに確認できるようになりました。nuxt generate
からnuxt build && nuxt export
へgenerate.routes
を書く必要がもうないということです。コメントと化した結構重要(多分一番めんどい)な部分export default {
generate: {
// routes: generateRoutes, // 生成する
dir: 'docs'
},
}
2.0から2.13へ上げます。
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"
},
なお私もよく分かっていない。^
←これなに?
npm installで再召喚するので大丈夫
npm install
を実行します。
おそらくおま環だろうけど私の環境では管理者権限ないとできませんでした。
まあうまく行かないよね
Unexpected end of JSON input while parsing
なんとか
npm cache clean --force
を実行する。何してるか分かってるよな? って言われた。分からないnpm WARN using --force I sure hope you know what you are doing.
開いたら、静的生成して^~ってNuxtに伝えます。
target:static
を追加します。
export default {
// 静的サイト書き出し。universalとstatic入れてね
mode: 'universal',
target: 'static',
}
package.json
を開いて、script
にある、generate
を書き換えます。
"scripts": {
"generate": "nuxt build && nuxt export",
}
すると生成されます。お疲れ様でした~
今回のNuxt.jsさんは、勝手にリンクを見つけてリンクの分だけ生成するようになったのでもう不要です。
いやールーティング面倒だったのでこれはとてもありがたい。
一応、nuxt.config.js
で明示的に無効にする(generate.crawler: false
)ことで旧仕様(generate.routes
)を利用できるっぽい。
本番環境(私ならNetlify)に公開された場合どんな感じに見れるのか(多分変わらんと思うけど)を確認できる機能が付きました。
npx nuxt serve
(package.jsonにscript書かなくても、npx
使えば直接使える)"scripts": {
"staticdev": "nuxt serve",
}
実行はnpm run staticdev
(別にstaticdev
って名前である必要はない。みんなはかっこいい名前をつけてあげよう)
v-content
からv-main
になった模様
あと強制上書きCSSがまた動かなくなってた(力技やめとけ)
それでふとSCSS
ってやつでVuetifyが適用するCSSの内容変えられるやんって思って見てみると、あるんですね~
// Vuetifyが勝手に色つける問題
$code-background-color: '#000000';
code-background-color
なんていつの間に追加してたの?
また今度やろうと思います
npx
なんて便利な機能あったんですね(え)
https://nuxtjs.org/blog/going-full-static
https://ja.nuxtjs.org/guide/upgrading/
https://microcms.io/blog/nuxt-full-static-generation/