Zenn
⚡

Viteでマルチページアプリを作る

2022/08/28に公開
Vite
マルチページ
tech

はじめに

Viteでマルチページにするやり方を調べたのでまとめておこうと思います。
実際にやってみたリポジトリ: https://github.com/t-shiratori/vite-multiple-page

プロジェクトを作成する

最初の Vite プロジェクトを生成するに従ってプロジェクトを作成します。ここでのテンプレートはvanilla-tsを選択します。作成時点のディレクトリ構成は以下のようになっています。

vite-project
 ┣ public
 ┃ ┗ vite.svg
 ┣ src
 ┃ ┣ counter.ts
 ┃ ┣ main.ts
 ┃ ┣ style.css
 ┃ ┣ typescript.svg
 ┃ ┗ vite-env.d.ts
 ┣ .gitignore
 ┣ index.html
 ┣ package.json
 ┗ tsconfig.json

srcディレクトリにファイルを追加する

例として以下のようにファイルを追加してみます。

src
 ┣ sample1
 ┃ ┣ index.html
 ┃ ┗ main.ts
 ┣ sample2
 ┃ ┣ index.html
 ┃ ┗ main.ts
sample1/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script type="module" src="./main.ts"></script>
  </body>
</html>
sample1/main.ts
const body = document.querySelector('body')
body?.appendChild(document.createTextNode('sample1'))
export {}
sample2/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script type="module" src="./main.ts"></script>
  </body>
</html>
sample2/main.ts
const body = document.querySelector('body')
body?.appendChild(document.createTextNode('sample2'))
export {}

vite.config.jsの設定

vite.config.jsをプロジェクト直下に追加します。
defineConfigを使ってrootをsrcディレクトリに変更します。

vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'

const root = resolve(__dirname, 'src')

export default defineConfig({
	root,
})

不要なファイルを削除して全体でこのようなディレクトリ構成になります。

vite-project
 ┣ public
 ┃ ┗ vite.svg
 ┣ src
 ┃ ┣ sample1
 ┃ ┃ ┣ index.html
 ┃ ┃ ┗ main.ts
 ┃ ┗ sample2
 ┃ ┃ ┣ index.html
 ┃ ┃ ┗ main.ts
 ┣ .gitignore
 ┣ package-lock.json
 ┣ package.json
 ┣ tsconfig.json
 ┗ vite.config.js

npm run devを実行して起動します。

% npm run dev

> webgl-vite-ts@0.0.0 dev
> vite


  VITE v3.0.9  ready in 306 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

http://127.0.0.1:5173/sample1/index.html, http://127.0.0.1:5173/sample2/index.html　　を開くと以下のように表示されます。

ビルドの設定

run devのみで使用する分には問題ないですが、ファイルの出力にも対応させるにはbuildオプションのoutDitとrollupOptionsの設定が必要になります。（参考: マルチページアプリ）
下記のようにエントリーポイントと出力先のディレクトリを指定します。

vite.config.js
import { resolve } from 'path';
import { defineConfig } from 'vite';

const root = resolve(__dirname, 'src');
const outDir = resolve(__dirname, 'dist');

export default defineConfig({
  root,
  build: {
    outDir,
    rollupOptions: {
      input: {
        sample1: resolve(root, 'sample1', 'index.html'),
        sample2: resolve(root, 'sample2', 'index.html'),
      },
    },
  },
});

npm run buildを実行すると下記のように出力されます。

% npm run build

> vite-project@0.0.0 build
> tsc && vite build

vite v3.0.9 building for production...
✓ 5 modules transformed.
../dist/sample1/index.html                          0.26 KiB
../dist/sample2/index.html                          0.26 KiB
../dist/assets/sample1.12d04bc2.js                  0.14 KiB / gzip: 0.14 KiB
../dist/assets/sample2.c24de582.js                  0.14 KiB / gzip: 0.14 KiB
../dist/assets/modulepreload-polyfill.c7c6310f.js   0.69 KiB / gzip: 0.39 KiB

dist
 ┣ assets
 ┃ ┣ modulepreload-polyfill.c7c6310f.js
 ┃ ┣ sample1.12d04bc2.js
 ┃ ┗ sample2.c24de582.js
 ┣ sample1
 ┃ ┗ index.html
 ┗ sample2
 ┃ ┗ index.html

最後に

こちらの動画がわかりやすく参考にさせていただきました。
https://youtu.be/STeKBm67l6M

Discussion