VueJS static website not doing browser refresh

Question

VueJS version 3.x with vue-router version 4.x developed website operates like it should in development and production environments except for a browser refresh. I would blame this on a misconfigured IIS server, but I am seeing the same reactions when I run the resulting vitejs build index.html within VSCode's Live Server. Any suggestions?

The onscreen error I am getting says "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.". This is happening on all routes with exception of the root route.

Repo at https://github.com/anthony-jackman/vulcan

main.js

import './styles/sass/main.scss'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '@/pages/HomePage.vue';
import ClassroomTrngPage from '@/pages/ClassroomTrngPage.vue';
import OnlineTrngPage from '@/pages/OnlineTrngPage.vue';
import NavyTrngPage from '@/pages/NavyTrngPage.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage
    },
    {
      path: '/classroom',
      name: 'classroom',
      component: ClassroomTrngPage
    },
......

src/pages/courses/ClassroomTrngPage.vue

<script setup>
import { RouterLink } from 'vue-router';

</script>

<template>

  <div class="courselist">
    <h2 class="title has-text-centered mt-3">craziness</h2>
    <hr class="divider" />
    <p>course description here</p>
    <table class="table is-fullwidth is-striped is-hoverable">
      <thead>
        <tr>
          <th>Old Course Number</th>
          <th>TRADOC Course Number</th>
          <th>Long Title</th>
        </tr>
      </thead>
      <tfoot></tfoot>
      <tbody>
        <tr>
          <td><RouterLink :to="{ name: 'ammo01' }">AMMO-01</RouterLink></td>
          <td>9E-F62/920-F30</td>
          <td>Conventional Ammunition Orientation</td>
        </tr>
        <tr>
          <td><RouterLink :to="{ name: 'ammo04' }">AMMO-04</RouterLink></td>
          <td>9E-F63/920-F31</td>
          <td>Ammunition Demilitarization</td>
        </tr>
....

Answer 1

The solution I found was to make a web.config rule to handle the SPA (VueJS) developed 'static' website. Inspiration came from the below link:

(VUEJS.org Router page)[https://router.vuejs.org/guide/essentials/history-mode.html#Internet-Information-Services-IIS-]