You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何正确为NPM模块打包资源?Vite导入SVG资源报错求助

npm包非JS资源导入的Vite兼容问题

我开发了一个名为my-lib的库,打包后的JS文件及类型声明存放在/dist目录,SVG资源存放在/assets目录,完整目录结构如下:

my-lib
├── assets
│   ├── a.svg
│   ├── b.svg
├── dist
│   ├── index.d.ts
│   ├── index.mjs
│   ├── index.umd.js
├── LICENSE
├── package.json

我的需求是:JS模块从包根目录my-lib导出,SVG资源允许通过my-lib/assets路径导入(需配合对应框架与打包器插件,比如React+Vite环境下使用vite-plugin-svgr)。

这种导入方式在create-react-app+Webpack项目中可以正常使用(通过import { ReactComponent as A } from "my-lib/assets/a.svg";导入,并配置了合适的TypeScript声明文件),但在Vite项目中会报错:

[vite] Internal server error: Missing "./assets/a.svg" export in "my-lib" package

当前package.json的关键配置如下:

// package.json
{
  "main": "./dist/index.umd.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "files": [
    "./dist",
    "./assets"
  ],
  // ...其他配置
}

请问:

  • package.json中是否存在针对非JS资源的特定配置字段?
  • 这个问题是否仅属于打包器的配置问题?

内容的提问来源于stack exchange,提问作者tobiasfried

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.04 14:55:15