穀風

[Vite](https://vitejs.dev/) では、以下のように `rollupOptions.input` を指定することでマルチページアプリケーションを作ることが可能です。

```js
`title: "vite.config.ts"
export default defineConfig({
  // 省略
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'src/main/index.html'),
        admin: resolve(__dirname, 'src/admin/index.html'),
        user: resolve(__dirname, 'src/user/index.html'),
      },
    },
  },
});
```

参考


[Build Options | Vite](https://rollupjs.org/configuration-options/#input)



場合によっては便利なのですが、この設定をした上で [Vue Router](https://router.vuejs.org/) のようなルーティング機能を使うと問題がおこるので注意しなければなりません。

例えば `main` 以下に `/main/users/1200` のようなサブページを作りたい場合、ルーターの設定をしただけでは動かないはずです。

この場合、サーバーは `/main/users/1200` などというページが存在しないので、特定のページに rewrite します。
これが、 Vite の dev server の場合、デフォルトで `/index.html` なのです。つまり、そんなページは存在しないとエラーを吐かれてしまいます。

これを、 `/main.html` に rewrite するよう、設定を変更しなければなりません。



### dev server
`npm run dev` 等で開発サーバーを立ち上げた場合、 Vite が内部に持っているサーバーが立ち上がります。
このサーバーの rewrite を設定するには、以下のように `vite.config.ts` に plugins を設定します。

```js
`title: "vite.config.ts"
export default defineConfig({
  // 省略
  plugins: [
    {
      name: 'rewrite-route',
      configureServer({ middlewares }) {
        middlewares.use((req, _, next) => {
          if (req.url != null) {
            if (req.url.startsWith('/main/')) {
              req.url = '/main.html';
            } else if (req.url.startsWith('/admin/')) {
              req.url = '/admin.html';
            } else if (req.url.startsWith('/user/')) {
              req.url = '/user.html';
            }
          }
          next();
        });
      },
    },
  ],
});
```

参考


https://vitejs.dev/guide/api-plugin.html#configureserver



### Firebase Hosting
この挙動はサーバー側のものですから、サーバーの種類を変えた場合、設定方法も変わります。

本番環境にデプロイする場合は、こちらも考慮しなければなりません。

例えば [Firebase Hosting](https://firebase.google.com/docs/hosting/full-config?authuser=0#rewrites) の場合、以下のような設定ファイルを用意することで rewrite を制御することが可能です。


```js
`title: "firebase.json"
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/main/**",
        "destination": "/main.html"
      },
      {
        "source": "/admin/**",
        "destination": "/admin.html"
      },
      {
        "source": "/user/**",
        "destination": "/user.html"
      },
      {
        "source": "**",
        "destination": "/error.html"
      }
    ]
  }
}
```

大抵のホスティングサービスは、こういった制御が可能になっていますので、各サービスのマニュアルを参照してください。