Vite 构建文件中的字体路径错误

Question

我在 css 文件夹中有一个 stylesheet ，在 fonts 文件夹中有一些字体。 fonts 和 css 文件夹位于同一目录中。

文件夹结构

|-fonts
|   |--- a.woff
|   |--  b.woff2      
|
|-css
    |--- typography.css
    

我在 typography.css 中使用了 a.woff 和 b.woff2，如下所示：

@font-face {
  font-family: "basis-pro";
  src: url("../fonts/a.woff2") format("woff2"),
    url("../fonts/b.woff") format("woff");
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}

我已经更改了 base >、vite.config.js 的 rollupOptions.outPut 和 outDir。

export default defineConfig({
  base: "./",
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          var info = assetInfo.name.split(".");
          var extType = info[info.length - 1];
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = "img";
          } else if (/woff|woff2/.test(extType)) {
            extType = "fonts";
          }
          return `static/${extType}/[name]-[hash][extname]`;
        },
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
      },
    },
    outDir: "./../backend/src/main/resources/static/app/",
  },
});

构建应用程序时，除字体之外的所有资源都具有正确的路径。

fonts 在 fonts 中生成，css 文件在 css 文件夹中生成。但是css文件中的两种字体路径错误。

@font-face {
  font-family: "basis-pro";
  src: url("./a.woff2") format("woff2"),
    url("./b.woff") format("woff");
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}

它必须如下所示，因为我的资产具有与上面相同的文件夹结构（文件夹结构）。

@font-face {
  font-family: "basis-pro";
  src: url("../fonts/a.woff2") format("woff2"),
    url("../fonts/b.woff") format("woff");
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}

如何解决这个问题？