<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
Viteでマルチページにするやり方を調べたのでまとめておこうと思います。 
実際にやってみたリポジトリ: <a href="https://github.com/t-shiratori/vite-multiple-page" target="_blank" rel="nofollow noopener noreferrer">https://github.com/t-shiratori/vite-multiple-page</a>
<h1 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> プロジェクトを作成する</h1>
<a href="https://ja.vitejs.dev/guide/#%E6%9C%80%E5%88%9D%E3%81%AE-vite-%E3%83%95%E3%82%9A%E3%83%AD%E3%82%B7%E3%82%99%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B" target="_blank" rel="nofollow noopener noreferrer">最初の Vite プロジェクトを生成する</a>に従ってプロジェクトを作成します。ここでのテンプレートは<code>vanilla-ts</code>を選択します。作成時点のディレクトリ構成は以下のようになっています。
<div class="code-block-container"><pre><code>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
</code></pre></div><h1 id="src%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AB%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#src%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AB%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B" aria-hidden="true"></a> srcディレクトリにファイルを追加する</h1>
例として以下のようにファイルを追加してみます。
<div class="code-block-container"><pre><code>src
 ┣ sample1
 ┃ ┣ index.html
 ┃ ┗ main.ts
 ┣ sample2
 ┃ ┣ index.html
 ┃ ┗ main.ts
</code></pre></div><div class="code-block-container">
<div class="code-block-filename-container">sample1/index.html</div>
<pre class="language-html"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script type="module" src="./main.ts"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">sample1/main.ts</div>
<pre class="language-ts"><code class="language-ts">const body = document.querySelector('body')
body?.appendChild(document.createTextNode('sample1'))
export {}
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">sample2/index.html</div>
<pre class="language-html"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script type="module" src="./main.ts"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">sample2/main.ts</div>
<pre class="language-ts"><code class="language-ts">const body = document.querySelector('body')
body?.appendChild(document.createTextNode('sample2'))
export {}
</code></pre>
</div><h1 id="vite.config.js%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#vite.config.js%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> vite.config.jsの設定</h1>
<code>vite.config.js</code>をプロジェクト直下に追加します。 
<a href="https://ja.vitejs.dev/config/#%E8%A8%AD%E5%AE%9A%E3%81%AE%E8%87%AA%E5%8B%95%E8%A3%9C%E5%AE%8C" target="_blank" rel="nofollow noopener noreferrer">defineConfig</a>を使って<a href="https://ja.vitejs.dev/config/shared-options.html#root" target="_blank" rel="nofollow noopener noreferrer">root</a>を<code>src</code>ディレクトリに変更します。
<div class="code-block-container">
<div class="code-block-filename-container">vite.config.js</div>
<pre class="language-js"><code class="language-js">import { resolve } from 'path'
import { defineConfig } from 'vite'

const root = resolve(__dirname, 'src')

export default defineConfig({
	root,
})
</code></pre>
</div>不要なファイルを削除して全体でこのようなディレクトリ構成になります。
<div class="code-block-container"><pre><code>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
</code></pre></div><code>npm run dev</code>を実行して起動します。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">% npm run dev

&gt; webgl-vite-ts@0.0.0 dev
&gt; vite


 VITE v3.0.9 ready in 306 ms

 ➜ Local: http://127.0.0.1:5173/
 ➜ Network: use --host to expose
</code></pre></div><code>http://127.0.0.1:5173/sample1/index.html</code>, <code>http://127.0.0.1:5173/sample2/index.html</code>　　を開くと以下のように表示されます。
<img src="https://storage.googleapis.com/zenn-user-upload/e112c382f937-20220828.png" width="500" loading="lazy" class="md-img">
<img src="https://storage.googleapis.com/zenn-user-upload/b752d4b73725-20220828.png" width="500" loading="lazy" class="md-img">
<h1 id="%E3%83%93%E3%83%AB%E3%83%89%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%83%93%E3%83%AB%E3%83%89%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> ビルドの設定</h1>
<code>run dev</code>のみで使用する分には問題ないですが、ファイルの出力にも対応させるには<code>build</code>オプションの<code>outDit</code>と<code>rollupOptions</code>の設定が必要になります。（参考: <a href="https://ja.vitejs.dev/guide/build.html#multi-page-app" target="_blank" rel="nofollow noopener noreferrer">マルチページアプリ</a>） 
下記のようにエントリーポイントと出力先のディレクトリを指定します。
<div class="code-block-container">
<div class="code-block-filename-container">vite.config.js</div>
<pre class="language-js"><code class="language-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'),
 },
 },
 },
});
</code></pre>
</div><code>npm run build</code>を実行すると下記のように出力されます。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">% npm run build

&gt; vite-project@0.0.0 build
&gt; tsc &amp;&amp; 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
</code></pre></div><div class="code-block-container"><pre><code>dist
 ┣ assets
 ┃ ┣ modulepreload-polyfill.c7c6310f.js
 ┃ ┣ sample1.12d04bc2.js
 ┃ ┗ sample2.c24de582.js
 ┣ sample1
 ┃ ┗ index.html
 ┗ sample2
 ┃ ┗ index.html
</code></pre></div><h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
こちらの動画がわかりやすく参考にさせていただきました。 
<iframe src="https://www.youtube-nocookie.com/embed/STeKBm67l6M" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe><a href="https://youtu.be/STeKBm67l6M" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://youtu.be/STeKBm67l6M</a>

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

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

Discussion