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>