2023/09/13

[Vite] マルチページを作成した際は rewrite を正しく設定しなければならない

Vite では、以下のように rollupOptions.input を指定することでマルチページアプリケーションを作ることが可能です。

?
vite.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
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

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

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

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

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

続きを読む »