viteでVue.jsのファイルをbuildしてもうまく表示されない。

Question

前提

viteで、Vue.jsのファイルをbuildしました。
vite.config.jsで、

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

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

このように設定しています。

発生している問題・エラーメッセージ

buildして、distのindex.htmlをライブサーバーで起動すると、
navのヘッダーだけが表示されます。そこから下は真っ白です。これがエラー１個目です。

navの中をクリックすると、ちゃんとページは遷移します。
しかし、ページを更新すると、ヘッダーごと真っ白になり、

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

とエラーになります。これがエラー２個目です。

該当のソースコード

// skl-blog/src/router/index.js
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue"
import AboutView from "../views/AboutView.vue"

const routes = [
  {
    path: "/",
    name: "HomeView",
    component: HomeView,
  },
  {
    path: "/about",
    name: "AboutView",
    component: AboutView,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

<script setup>
import { onMounted, ref } from "vue";
import Header from "./components/Header/AppHeader.vue";
import { getData } from "./mounted/getData";
import { useStore } from "vuex";

const store = useStore();
const data = ref([]);

onMounted(async () => {
  data.value = await getData("pref");
  store.dispatch("commitSetPrefData", { data: data });
});
</script>

<template>
  <Header />
　// ライブサーバーを立ち上げた時には↓が読み込まれません
  <router-view></router-view>
</template>

<style lang="scss" scoped></style>

試したこと

vite.config.jsの中で、
色んなサイトで見つけたパターン（baseURL、publicPathなど）を試してみましたが、他の方法ではすべて真っ白でした。

せっかく作ったのにbuildで頓挫とはむなしすぎます。どなたか良いアドバイスをくださいませんか。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

vite.config.jsのmerge fruitsオプションを'./'として設定していますが、もしビルドされたファイルがサブディレクトリに配置されている場合、正しいbaseパスを指定する必要があります。例えば、ビルドされたファイルがdistディレクトリのサブディレクトリにある場合は、base: '/subdirectory/'のように設定する必要があります。

Answer 2

buildしてもディプロイするまではVue Routerが読み込まれないみたいです。うまく表示されないのは無視して、とりあえずディプロイするとうまくいってました。