Vite多页面网站构建部署后非首页资源路径异常问题求助

各位好！我用Vite搭了个多页面的React网站，本地开发的时候一切都正常，但是构建部署之后就出问题了——只有index.html能正确加载CSS和JS资源，其他的页面比如About.html、VT.html这些，打开之后样式全乱了，检查了一下发现这些页面里的资源路径还是指向src文件夹，而不是构建后的dist/assets目录，根本找不到正确的资源文件。

我已经尝试在vite.config.js里配置了多入口，把所有页面都加进rollupOptions的input里了，但还是没解决这个问题。下面是我的相关配置和代码：

页面中的资源引用方式 #

<link rel="stylesheet" href="src/styles/styles.css">
<link rel="stylesheet" href="src/styles/styles-threejs.css">

我的vite.config.js配置 #

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

export default defineConfig({
  plugins: [react()],
  base: "/",
  build: {
    outDir: "dist",
    assetsDir: "assets",
    sourcemap: true,
  },
  rollupOptions: {
    input: {
      index: "index.html",
      about: "/About.html",
      vt: "/VT.html",
      ksu: '/KSU.html',
      jhu: "/JHU.html",
      renderings: "/Renderings.html",
    },
  },
});

有没有大佬能帮我看看问题出在哪？是不是资源引用的路径写法不对？还是vite的配置里有什么遗漏的地方？麻烦指点一下！

内容来源于stack exchange