vite/vuejsでビルドしたアプリを相対パスで利用できるようにする #Vue.js

vite/vuejsでビルドしたアプリはルートパス(https://<domain>/)でしか利用できないため、これを任意のパス(https://<domain>/<path>/)で利用できるようにしたいです。

以下の二つの設定を行うことで実現できます。

package.jsonと同じフォルダにvue.config.jsを作成し以下の内容を記述します

module.exports = {
    publicPath: './'
}

vite.config.tsを編集しbase: "./"を追記します(以下は例です)

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: "./"
})

上記を実施してビルドを行うと、distフォルダに生成されたindex.htmlのパスが以下のように相対パスになっていることが分かります(favicon.ico、javascript、cssのURLが相対になっています)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="./favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
  <script type="module" crossorigin src="./assets/index.7e76e188.js"></script>
  <link rel="stylesheet" href="./assets/index.752813db.css">
</head>
<body>
  <div id="app"></div>
</body>
</html>