Nuxt.jsにデバッグ時のみ参照可能なページを設定する
開発時に便利なページ一覧とかデバッグ用のAPIドライバとか、そういうページをproduction環境では隠蔽して組み込みたいとき。
Vue.jsではVue Routerで簡単に環境変数で分岐を作っていじくれるけど、Vue Routerが隠蔽されてるNuxt.jsではどうやろうかなと考えたところ。
「extendRoutes」をうまく使えば設定できそうなのでやってみた。
前提として「cross-env」の設定を済ませておく。
.envファイルにデバッグモードか否か（DEBUG）の設定を持たせておき、それがfalseならデバッグページ（ここでは/debug以下）へのルートをルートディレクトリにリダイレクトする。
デバッグページ自体は「/pages/debug/」配下にそのまま作成。
できればルートそのものを削除したかったけどどうもそれはできなさそうだったのでこのやり方で。
Vue.jsではVue Routerで簡単に環境変数で分岐を作っていじくれるけど、Vue Routerが隠蔽されてるNuxt.jsではどうやろうかなと考えたところ。
「extendRoutes」をうまく使えば設定できそうなのでやってみた。
前提として「cross-env」の設定を済ませておく。
const environment = process.env.NODE_ENV || 'local'
const envSet = require(`./.env.${environment}.js`)
export default {
～～～
// Router Configuration: https://nuxtjs.org/docs/configuration-glossary/configuration-router/
router: {
extendRoutes(routes) {
// Debug only
if (!envSet.DEBUG) {
routes.map((route) => {
if (route.path.startsWith('/debug')) {
route.redirect = '/'
}
return route
})
}
},
},
env: envSet,
}デバッグページ自体は「/pages/debug/」配下にそのまま作成。
できればルートそのものを削除したかったけどどうもそれはできなさそうだったのでこのやり方で。