如何解决Vite打包npm工具库时静态资源（如SVG）的路径问题？

Question

我在本地开发环境路径是没有问题的。而且我的svg很小1kb左右，使用
new URL(./assets/${fileName}.svg, import.meta.url).pathname
的方式，他变成了data: URL编码了。
一切在没上传到npm之前都没有问题，
我尝试了各种方法但是svg的读取，始终是基于使用工具库的路径。（http://localhost:5173/*.svg）
以下是我vite的代码

import { defineConfig } from "vite";
import { resolve } from "path";
import path from "path";
import dts from "vite-plugin-dts";

export default defineConfig({
  publicDir: "public",
  base: "./",
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./"),
    },
  },
  plugins: [dts()],
  build: {
    lib: {
      entry: resolve(__dirname, "lib/index.ts"),
      name: "imhdChannelization", // the proper extensions will be added
      fileName: "imhd-channelization",
    },
    minify: false,
    outDir: "dist", // 输出目录
    assetsDir: "assets", // 静态资源目录
  },
});

下面是我打包的结构

以下是报错信息，我不明白为什么在node_moudles中的资源会以这种请求路径，而且我都是data: URL编码了还要在请求资源吗？

Answer 1

找到一种解决办法，我不应该使用pathname属性，应该使用href

new URL(./assets/${fileName}.svg, import.meta.url).href

href：获取完整的 URL，包括协议、主机名、端口号、路径、查询字符串和哈希，适用于在浏览器中加载资源。
pathname 属性: 返回 URL 的路径部分，对于 data: URL，这个部分基本上不适用，因为 data: URL 没有传统意义上的路径。
但是在vite中有很多加载静态资源的方式，其他几种方式还没有尝试，不过直接使用默认public文件下的静态资源的方式是行不通的。