みかづきブログ・カスタム

基本的にはちょちょいのほいです。

universalモードのNuxt.jsでnuxt generateで静的サイト書き出しをしつつ、staticなディレクトリ内の静的HTMLにもアクセスできるようにする 💻

f:id:kimizuka:20200811145835p:plain

凄くレアなケースだと思うのですが、Nuxt.jsをつかってサイトを作っているとき、ある階層以下はVueを使わない普通のHTMLをホスティングしたいこともあると思います。例えば、 /policy/index.html にVueを使わずにつくったHTMLを置きたいときなどです。

そんな時は、static/policy/index.html というHTMLファイルを置いておけば、nuxt generateコマンドでstaticなファイルとして書き出しが行われると思っていたのですが、spaモードの時はうまくいけど、universalモードの時はうまくいきませんでした。何故ならばルーティングが解決しないからです。

nuxt generateコマンドを実行すると、

ERROR Error generating route "/policy": This page could not be found

というエラーになってしまいます。

繰り返しますが、spaモードにすれば解決します。
訳あってそうはいかない場合、まあそんな時はないような気がしますが、pages/policy.vueを作ればルーティング問題は解決します。
が。当たり前ですが、/policy/index.htmlにアクセスすると、pages/policy.vueを元にしたページが表示されてしまいます。

色々考えた結果、pages/policy.vueを作りつつ、

"dist": "nuxt generate && cpx 'static/policy/**/*.html' 'dist/policy'"

というコマンドを作って、解決しました。
nuxt generateで、一旦pages/policy.vueを元にしたページを生成しつつ、cpxをつかって、staticの中に置いたHTMLで上書きすると言う方法です。これならばルーティング問題を解決しつつ、staticなHTMLファイルの配信が可能になります。

一件落着ですが、単純にspaモードに切り替えた方がシンプルだったとも思ってます。