この記事では<a href="https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vue-ts" target="_blank" rel="nofollow noopener noreferrer">create vite (Vue + TypeScript)</a>のボイラープレートを使います。Vueを選択していますが、末端技術は他を選択していても問題無いので、使うライブラリに合わせて適宜読み替えてください。
デフォルトではエントリーポイントは <code>index.html</code> だけのため、別Page(<code>sub-page.html</code>)を新規で作ります。
<div class="code-block-container"><pre class="diff-highlight "><code class="diff-highlight code-line" data-line="6">vite-project
 ├── src
 │ └── ...
 ├── index.html
+ ├── sub-page.html
 └── ...
</code></pre></div><div class="code-block-container">
<div class="code-block-filename-container"> sub-page.html</div>
<pre class="language-html"><code class="language-html code-line" data-line="15">&lt;!doctype html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;link rel="icon" type="image/svg+xml" href="/vite.svg" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;title&gt;Vite + Vue + TS&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;!-- index.htmlとはmount対象のidとモジュールファイルを別にする (※この後作ります) --&gt;
 &lt;div id="sub-page"&gt;&lt;/div&gt;
 &lt;script type="module" src="/src/sub-page/main.ts"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>新規で作るエントリーポイントは <code>/src/sub-page/main.ts</code> です。既にプロジェクトにある <code>src/main.ts</code> <code>src/App.vue</code> をコピーする形で以下のファイルも作っておきます。
<div class="code-block-container">
<div class="code-block-filename-container"> src/sub-page/SubPage.vue</div>
<pre class="language-html"><code class="language-html code-line" data-line="34">&lt;script setup lang="ts"&gt;
&lt;/script&gt;

&lt;template&gt;
 &lt;div&gt;
 Sub Page
 &lt;/div&gt;
&lt;/template&gt;
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container"> src/sub-page/main.ts</div>
<pre class="language-typescript"><code class="language-typescript code-line" data-line="45">import { createApp } from 'vue';
import '../style.css';
import SubPage from './SubPage.vue';

// &lt;div id="sub-page"&gt;&lt;/div&gt;に対してmountする
createApp(SubPage).mount('#sub-page');
</code></pre>
</div>この状態で <code>vite build</code> を行っても追加した <code>sub-page.html</code> はエントリーポイントとして認識されず、<code>index.html</code> に必要なモジュールしかビルドされません。<code>vite.config.ts</code> の <code>build.rollupOptions</code> を変更して複数のHTMLファイルをエントリーポイントとして認識できるようにします。
<div class="code-block-container">
<div class="code-block-filename-container"> vite.config.ts</div>
<pre class="diff-highlight "><code class="diff-highlight code-line" data-line="56">import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
+ build: {
+ rollupOptions: {
+ input: {
+ index: './index.html',
+ 'sub-page': './sub-page.html',
+ },
+ },
+ },
});
</code></pre>
</div>これで <code>sub-page.html</code> と必要なJSモジュールが <code>dist/</code> にビルドされるようになりました。
<h4 id="mpa%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%A8%E7%B5%B1%E5%90%88%E3%81%99%E3%82%8B" data-line="76" class="code-line">
<a class="header-anchor-link" href="#mpa%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%A8%E7%B5%B1%E5%90%88%E3%81%99%E3%82%8B" aria-hidden="true"></a> MPAのテンプレートと統合する</h4>
DjangoやRuby on RailsのようなWebフレームワークでは、レスポンス時にサーバサイドの変数を挿入するために、プレーンなHTMLファイルではなく内包されたテンプレートエンジンを使うことが多いです。その中でViteでビルドしたJavaScriptモジュールを使えるようにするには、ビルド後の　<code>dist/*.html</code>　でやっているモジュールのimportを引っ張ってきます。
<div class="code-block-container"><pre class="language-html"><code class="language-html code-line" data-line="80">&lt;!-- 以下のような記述をビルドの度にコピーしていく必要がある --&gt;
&lt;script type="module" crossorigin src="path/to/dist/assets/index-B1EWmLEa.js"&gt;&lt;/script&gt;
&lt;link rel="modulepreload" crossorigin href="path/to/dist/assets/_plugin-vue_export-helper-C8EBO7q5.js" /&gt;
&lt;link rel="stylesheet" crossorigin href="path/to/dist/assets/style-ziVyQSII.css" /&gt;
</code></pre></div>これでテンプレートエンジンのようなHTML生成部分にモジュールを紐づけることが出来ました。
<h4 id="%E7%97%92%E3%81%84%E6%89%80%E3%81%AB%E6%89%8B%E3%81%8C%E5%B1%8A%E3%81%8F%E7%B3%BB%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="89" class="code-line">
<a class="header-anchor-link" href="#%E7%97%92%E3%81%84%E6%89%80%E3%81%AB%E6%89%8B%E3%81%8C%E5%B1%8A%E3%81%8F%E7%B3%BB%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 痒い所に手が届く系の設定</h4>
Build hashの変更に追従する手間の削減、エントリーポイント単位でBundleを纏める...のような事を実現するために、一部の設定を変更する方法もあります。 
Vite(Rollup)では、デフォルトのBuild optionでモジュール分割・Webパフォーマンスの最適化をしており、変更が品質とトレードオフになるものもあります。 本記事のように、MPAの中でピンポイントで使う上でネックになる部分は運用の複雑さとのバランスを取るのが良いと考えます。
<div class="code-block-container">
<div class="code-block-filename-container"> vite.config.ts</div>
<pre class="diff-highlight "><code class="diff-highlight code-line" data-line="94">import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 build: {
+ cssCodeSplit: false, // CSSファイルの自動分割を無効にして単一にします
+ modulePreload: false, // 動的インポートが行われるモジュールの事前読み込み(`&lt;link rel="modulepreload" ... /&gt;`)を無効にします
 rollupOptions: {
 input: {
 index: './index.html',
 'sub-page': './sub-page.html',
 },
+ // Browser・CDNでのキャッシュ不整合を防ぐためのビルドハッシュを、chunkの名前から削ります
+ output: {
+ entryFileNames: 'assets/[name].js',
+ chunkFileNames: 'assets/[name].js',
+ assetFileNames: 'assets/[name].[ext]',
+ },
 },
 },
});
</code></pre>
</div><hr data-line="120" class="code-line">
Viteのようなモジュールバンドラは、SPAのフロントエンドを前提とする使い方がほとんどかと思いますが、複数のHTML(エントリーポイント)を持つMPAの中でPluggableにVueやReactで実装したコンポーネントを導入していくためのツールチェーンとしても有力ですね。

ViteをMPAのモジュールバンドラとして使う

Discussion