vite/vuejsでビルド後のindex.htmlで相対パスで利用できるようにする

公開日 2022年9月12日(月)

環境

macOS Monterey 12.0.1
VSCode
node.js v18.6.0
npm 8.13.2
vue 3.2.25

設定方法

バンドルしたjsやらcssやらのファイルパスが、デフォルトだとルートからの絶対パスになっており、サブドメイン環境等で任意の相対パスを指定したいことがあるはず。

上記のようなケースでは、vue, viteそれぞれに簡単な設定を追加することで実現可能です。

vueの設定

configファイルを作成し、以下の記述を記載する

vue.config.js

module.exports = {
  publicPath: "./",
};

viteの設定

baseに追記

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  base: "./", // 追加
});

上記設定後にビルドを行うと、distフォルダに生成されたindex.htmlのパスが以下のように相対パスになる。めでたしめでたし

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="./vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vite + Vue + TS</title>
   <script type="module" crossorigin src="./assets/index.905822bb.js"></script>
   <link rel="stylesheet" href="./assets/index.35e49caf.css">
 </head>
 <body>
   <div id="app"></div>
 </body>
</html>

まとめ

いかがでしたでしょうか。本記事では、vite/vuejsでビルド後のindex.htmlで相対パスで利用できるようにする方法について紹介しています。ぜひ参考にしてみて下さい