VueJS 静态网站不进行浏览器刷新

Question

VueJS 3.x 版和 vue-router 4.x 版开发的网站在开发和生产环境中的运行方式与应有的方式相同，除了浏览器刷新之外。我将其归咎于配置错误的 IIS 服务器，但当我在 VSCode 的 Live Server 中运行生成的 vitejs build index.html 时，我看到了相同的反应。有什么建议吗？

我收到的屏幕错误显示“您正在查找的资源已被删除、名称已更改或暂时不可用。”。除根路由外，所有路由都会发生这种情况。

仓库位于 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')

路由器/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

我找到的解决方案是制定一个 web.config 规则来处理 SPA (VueJS) 开发的“静态”网站。灵感来自以下链接：

（VUEJS.org 路由器页面）[https://router.vuejs.org/guide/essentials/history-mode.html#Internet-Information-Services-IIS-]