How to2021.04.02

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

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

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

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

目次

Nuxtのgenerateをフックして生成ファイルを制御
modulesに定義する
Nuxt.jsは静的ファイルジェネレーターとしても便利

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

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

[https://github.com/nuxt/nuxt.js/issues/2719](How to exclude some routes when using nuxt generate · Issue #2719 · nuxt/nuxt.js)

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

modulesに定義する

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

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

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

1
2
3
4
5
6
7
8
9
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のところでパスが/admin配下の時は生成ファイルに含まないようにしています。

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

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

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

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

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