ビルドしたHTMLファイルはブラウザで表示不可
Vite + Reactでは「npm run build」を実行すると、Reactコードをブラウザ用のJavaScriptへの変換やファイルの圧縮などを行います。
書き出されるファイルは下図のようになっています。
書き出されたindex.htmlファイルをブラウザにドラッグ＆ドロップしても画面は真っ白になり内容を確認できません。
HTMLファイルを直接開くと、URLは次のようになります。
file:///Users/xxx/project/dist/index.html
Viteが生成するJavaScriptのファイルはES Modules (type="module") で読み込まれます。
<script type="module" crossorigin src="/assets/index-xxxxx.js"></script>ブラウザは file:// からのモジュール読み込みを制限しているため、JavaScriptのファイルが読み込まれず、画面が真っ白になります。
また、ファイルのパスがルートパスになっているため、file:// で開くと以下の場所から読み込もうとするため、ファイルが見つからないため、読み込めません。
file:///assets/index-xxxxx.js
ビルドしたものを確認するには「npm run preview」コマンドでローカルサーバーを起動して確認する必要があります。
しかし、状況によってはローカルサーバーを起動せず、ブラウザで開いて確認したいケースがあります。(クライアントにファイルを渡して開いてもらうなど)
サーバー起動なしで確認する方法
サーバー起動なしで確認するには、まずindex.html内にJSやCSSのファイルを含めます。
index.htmlファイル内のコードを確認すると、以下のようにJSとCSSを読み込んでいる箇所があります。
<script type="module" crossorigin src="/assets/index-DFoPaCK7.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-COcDBgFa.css">こちらのコードのscriptタグはsrc属性を削除してscriptタグ内にJSのコードをコピー＆ペースト、linkタグはstyleタグに変更して、CSSのコードをコピー＆ペーストして以下のような形にします。
<script type="module" crossorigin>
(function(){const nl=document.createElement("link").relList;})
// 以下略
</script>
<style crossorigin>
:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;}
/* 以下略 */
</style>JavaScriptのコードをindex.htmlに埋め込んだことで画像のパスが変わるため、画像のパスも置換して画像を読み込めるパスに変更します。
react-CHdo91hT.svg
↓
./assets/react-CHdo91hT.svg
以上の手順が完了した状態で、再度index.htmlをブラウザで開くと閲覧可能になっています。
プラグインでHTMLファイルにコードを含める方法
前述の方法だと手作業で変更する部分が多いので手間がかかります。
vite-plugin-singlefileプラグインを使用すれば、JSとCSSのコードをindex.html内に自動で挿入できます。
やり方はまず、vite-plugin-singlefileプラグインを以下のコマンドでインストールします。
npm i -D vite-plugin-singlefile次にvite.config.tsを開いて、vite-plugin-singlefileを読み込んで、以下のように設定します。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from "vite-plugin-singlefile"
// https://vite.dev/config/
export default defineConfig({
base: './',
plugins: [react(), viteSingleFile()],
})設定が完了した状態で、npm run buildを実行すると、index.html内にCSSとJavaScriptが含まれたコードが書き出されます。
以下の場所にビルドしたindex.htmlを含むzipファイルを保存しましたので、中にあるindex.htmlファイルを開いて確認してみてください。
https://iwb.jp/s/vite-react-build-html-open-in-browser/dist.zip
