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 `に定義して
開発用のパスは`/`でドキュメントルートを指定しよう。

```javascript: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'と指定するだけ。

```javascript: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'"`

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

```Vue: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/内に出力という形にしました。

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