vite编译vue3的多层级页面遇到组件路径问题

Question

以前过用 vite 构建多页面项目，但是尝试用 vite 构建一个多层级多页面的项目，编译时遇到下面的问题。测试项目目录结构如下：

• components 放一些自定义公用组件

  • slogan.vue

• pages

  • index.vue

  • sys-manage

    • user.vue 在其中引入 components 中的组件

• sys-manage

  • user.html
• index.html
• package.json
• vite.config.js

测试项目本意是想看看用 localhost:3000/sys-manage/user.html 是否可以正常访问。

vite.config.js的内容是这样：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { join, parse, resolve } from "path";

function entryPoints(...paths) {
  const entries = paths.map(parse).map(entry => {
    const { dir, base, name, ext } = entry;
    const key = join(dir, name);
    const path = resolve(__dirname, dir, base);
    return [key, path];
  });
  
  const config = Object.fromEntries(entries);
  // console.log(config)
  return config;
}

export default defineConfig({
  plugins: [vue()],
  alias: {
      "~": __dirname,
      // "+parent":command==='serve'?__dirname:resolve(__dirname,'..'),
    },
    build: {
      rollupOptions: {
        input: entryPoints(
          "index.html",
          "sys-manage/user.html"
        ),
      },
    },
  })

按照这样的配置，可以正常编译和访问 sys-manage/user.html 页面。但是现在遇到一个问题：如果在 pages/sys-manage/user.vue 中引入 components 目录下的组件 slogan.vue ，使用 vite dev 测试时，可以正常访问；而用 vite build 编译，则发现编译结果不能正常处理 slogan.vue 的路径。对于 sys-manage/user.vue 来说，slogan.vue 的路径应该是 '../components/slogon.vue'，但是编译的结果确把路径写成了 './components/slogan.vue'。
不知道大神们对解决这个路径问题有什么好办法？谢谢