MK Dev

Nuxt.jsで特定ファイルを生成リストから取り除く方法

この記事は公開から1年以上が経過しています。最新の内容と違いがある可能性があります。

こんにちは、コウジです!

Nuxt.jsでgenerateするとルーティング上のファイルをすべて生成されてしまうので、困ることってありませんか?

たとえば開発環境だけ管理画面を使えるようにするために/adminのようなルーティングが設定されているなど。

必要ないファイルを生成しない方法を紹介します。

Nuxtのgenerateをフックして生成ファイルを制御

このブログはNuxt.jsで構築していて、まさに/adminというルーティングが存在していますが、generate時に取り除いています。

方法を調べていたところぴったりのissueのがNuxtのリポジトリにありました。

How to exclude some routes when using nuxt generate · Issue #2719 · nuxt/nuxt.js

ここで紹介されている方法を元にgenerateで生成されるファイルを操作します。

modulesに定義する

まずはNuxt.jsではnuxt.config.jsのmodulesに生成操作するためのファイルを追加します。

modules: [
'~/modules/custom-generate.js' //ファイルは新規に作成する
]

custom-generate.jsの中身は下記のような感じです。 issueの方では生成するファイルのみ指定されていますが、今回やりたいことは取り除く方なので少し変更しました。

module.exports = function () {
this.nuxt.hook('generate:extendRoutes', async routes => {
const routesToGenerate = routes.filter(page => {
return page.route.match('/admin') ? false : true
})
routes.splice(0, routes.length, ...routesToGenerate)
});
}

page.route.matchのところでpathが/admin配下の時は生成ファイルに含まないようにしています。

/admin以外にも取り除きたい場合でも必要ないパスの場合はfalseを返すことで、生成するファイルから取り除くことができます。

Nuxt.jsは静的ファイルジェネレーターとしても便利

手軽にVueをSSRできたりSPAのアプリケーション開発が楽になるNuxt.jsですが、静的ファイルジェネレーターとしても本当に便利です。

生成するファイルを選択できたり、ファイルに手を加えることができたり、基本状態に手を加えることが手軽に行えます。

今回のように開発環境だけ/adminを使いというケースは需要があると思うので、特定のパスを生成ファイルから取り除きたい場合は紹介したほうが試してみてはいかがでしょうか?

AUTHORこの記事を書いた人

Koji Murakami

フリーでWeb開発をしているフロントエンドエンジニア。

SNS

SHARE記事をシェア

Nuxt.jsで特定ファイルを生成リストから取り除く方法

WEB制作の記事

WEB制作を依頼する

フリーのエンジニアとしてWEB制作のご依頼を引き受けています。
実績、できること、単価など詳しい内容をご覧いただきお問い合わせよりご連絡ください。