Nuxtでサイトルートをドキュメントルートでなく、サブディレクトリに配置する方法

概要

npm run generateしたもの(通常はdist)をサイトルートをドキュメントルートでなく、
その配下のサブディレクトリに配置する方法を記載します。

環境

1.Nuxtプロジェクトの準備

以下のようにコマンドを叩いてnuxtをinitしておく。

> cd project_name
> npx create-nuxt-app dev							
create-nuxt-app v3.7.1								
✨  Generating Nuxt.js project in dev								
? Project name: dev								
? Programming language: TypeScript								
? Package manager: Npm								
? UI framework: Vuetify.js								
? Nuxt.js modules: Progressive Web App (PWA)								
? Linting tools: ESLint, Prettier								
? Testing framework: None								
? Rendering mode: Universal (SSR / SSG)								
? Deployment target: Static (Static/Jamstack hosting)								
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)								
? Continuous integration: None								
? Version control system: None								

1-1. バージョンについて

nuxt, vueのバージョンは以下の通り(package-lock.jsonより)。

nuxt: 2.15.8
vue: 2.6.14

2. ディレクトリ構成

ディレクトリ構成を以下と仮定しておく。

document root
└─project_name // サイト名orプロジェクト名など任意のディレクトリ名
    ├─dev // 開発用（Nuxtプロジェクトが入ったディレクトリ）
    └─app // プロダクト用（この中をサイトルートにしたい。app/というディレクトリ名は実はテキトウ...）

問題

さて、そのままリリースしようとするといくつかの問題に直面する。

1. npm run devで起動したときにサイトルートがlocalhost:3000//のドキュメントルートになるのはいいが、npm run generateで出力させたディレクトリ(通常dist)はドキュメントルートではなくサブディレクトリに配置したい
2. app/に配置したいのでそもそもdistというディレクトリ名をappに変更したい
3. 1のように【開発用】と【generateしたプロダクト用】で異なるstatic/内のリソースまでのパスを自動的に書き換えてほしい

npm run generateしたもの(通常dist)をサイトルートをドキュメントルートでなく、
その配下のサブディレクトリに配置するために、以上の3点を解決していく。

解決方法

1. npm run generateで出力させたディレクトリ(通常dist)はドキュメントルートではなくサブディレクトリに配置する

まず味噌になるのが、router.baseへの記載。
npm run generateで出力されたものの配置先になるプロダクト用のパスはPRODUCTION_BASE_PATH に定義して
開発用のパスは/でドキュメントルートを指定しよう。

nuxt.config.js

import colors from 'vuetify/es5/util/colors'

const PRODUCTION_BASE_PATH = '/project_name/app/'; //ココ

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // ココ（DocRoot以下に配置するための記載）
  router: {
    base: process.env.NODE_ENV === 'production'
      ? PRODUCTION_BASE_PATH
      : '/'
  },

これでnpm run generateで出力されたもの(=dist)の中身だけごそっとapp/ディレクトリに落とせば80%は動く。
でもまだ、残りの20%の問題【毎回distの中身だけをコピペするのは少し手間】と【staticへのパスがずれていて画像などのリソースが404になる】が残っている。それを解決するために次の工程へ進む。

参考: https://nuxtjs.org/docs/configuration-glossary/configuration-router/

2. app/に配置したいのでそもそもdistというディレクトリ名をappに変更したい

1のままだと出力されるのはまだdistディレクトリのままなので、出力されるディレクトリ名をappに変更する。
コードは簡単。generate.dirを'app'と指定するだけ。

nuxt.config.js

 // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  },

  generate: {
    dir: 'app'
  }
}

3. static/までのパスを開発用とプロダクト用で動的に書き換えるられるように変更する

$router.options.baseを使ってやると動的な書き換えが適う。
Nuxt*Vuetify.jsのデフォルトのテンプレートを例にすると以下のようになる。

変更前: src="/vuetify-logo.svg"
変更後: :src="$router.options.base + 'vuetify-logo.svg'"

変更後のファイルはこんな感じ。

VuetifyLogo.vue

<template>
  <img
    class="VuetifyLogo"
    alt="Vuetify Logo"
    :src="$router.options.base + 'vuetify-logo.svg'"
  >
</template>

参考: https://github.com/nuxt/nuxt.js/issues/4544

以上の手順をすべて踏んで修正して以降は、
npm run generateで生成されたdev/内のappディレクトリを都度
project_name/app/に置き換えてあげればよい

あとがき

dev/内にappを出力せず、dev/外に直節出力させることもできると思うのですが
nuxtプロジェクト内で一度完結させたくて今回はdev/内に出力という形にしました。

ちなみに、説明に利用した各ソースは必要な部分のみの一部切り抜きです。ソースファイル全文ではありません。