【Vite】ビルド後のJS/CSSパスをindex.html基準にする方法

更新日：2026/01/15

Viteでビルドして生成されたファイルは、ドメイン直下にアップロードしないとうまく動作しません。
ですが、任意のフォルダで動作させたいケースがあります。

どうすればいいのでしょうか？

現状確認

ビルド後のindex.htmlを確認すると、JSとCSSを次のような形式で読み込んでいます。

<script type="module" crossorigin src="/assets/index-C5Ae_9sP.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DHBfgg6v.css">

srcまたはhrefの値が "/" から始まると、ドメイン直下からの相対URLになります。
つまり、その直前にプロトコルとドメイン名が付加されます。

次のようなイメージですね。

<script type="module" crossorigin src="https://ドメイン名/assets/index-C5Ae_9sP.js"></script>
<link rel="stylesheet" crossorigin href="https://ドメイン名/assets/index-DHBfgg6v.css">

このように、viteでビルドしたファイルはドメイン直下固定になっているため、配下のフォルダに配置するとJSとCSSを読み込めないのです。

対策方法

index.htmlがあるフォルダ基準でJSとCSSを読み込むときは、 同一階層からの相対URLとして指定すればOK。
具体的には、"./"からパスを開始します。

方法は、vite.config.js に baseオプションを記述します。

import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  base: './',
  plugins: [

変更後にビルドすると、index.htmlは次のようなイメージで出力されます。

<script type="module" crossorigin src="./assets/index-C5Ae_9sP.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-DHBfgg6v.css">

これで、ドメイン配下のフォルダでも、JSとCSSを読み込んでくれるようになりました。

絶対URLで指定したい場合

相対URLではなく、プロトコルを含めた絶対URLでJSとCSSを読み込みたいときは、次のようにbaseオプションを記述します。

import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  base: 'https://ドメイン名/',
  plugins: [

これでOK。

ドメイン名の後ろの"/"を忘れずに！

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。