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

環境
設定方法
1. vueの設定
2. viteの設定
Vue学習におすすめの書籍

環境

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

設定方法

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

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

vueの設定

vue.config.jsを作成し、以下の記述を記載する

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

viteの設定

vite.config.tsにbaseを追加する

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

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

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

index.html

<!DOCTYPEhtml>
<htmllang="en">
<head>
  <metacharset="UTF-8"/>
  <linkrel="icon"type="image/svg+xml"href="./vite.svg"/>
  <metaname="viewport"content="width=device-width, initial-scale=1.0"/>
  <title>Vite + Vue + TS</title>
  <scripttype="module"crossoriginsrc="./assets/index.905822bb.js"></script>
  <linkrel="stylesheet"href="./assets/index.35e49caf.css">
</head>
<body>
  <divid="app"></div>
</body>
</html>

Vue学習におすすめの書籍

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

Vue.js 3 超入門 [ 掌田津耶乃 ]
価格：3520円（税込、送料無料) (2022/8/7時点)

楽天で購入