自定义Vue组件库集成至其他项目时因路径错误导致组件找不到

问题根源 #

组件库的根组件能正常加载，但子组件出现404，核心原因是子组件未被正确打包进库的主输出文件，或是动态导入生成的独立chunk在主项目中无法解析路径——主项目会错误地从自身src目录查找组件，而非从node_modules中的组件库加载。

分步解决方案 #

1. 移除组件库Vite配置中的base字段

组件库作为依赖被其他项目引用时，base路径应由主项目决定，库配置中不需要设置该字段，避免干扰路径解析：

// vite.config.ts
export default defineConfig({
  // 移除这一行：base: "/progqi/"
  plugins: [/* ...现有插件配置... */],
  // ...其余配置保持不变
})

2. 内联动态导入模块（若使用了动态导入）

如果你的组件库内部使用了动态导入（如() => import('@components/ComponentA')），在Rollup输出配置中添加inlineDynamicImports: true，将所有动态导入的模块打包进主库文件，避免生成独立chunk：

// vite.config.ts -> build.rollupOptions.output
output: {
  globals: {
    vue: "Vue",
  },
  inlineDynamicImports: true // 新增此行
},

3. 修正组件库的package.json配置

确保package.json正确指定入口文件，并声明Peer依赖避免重复打包：

{
  "name": "@my-scope/my-package",
  "version": "x.x.x",
  "main": "./dist/lib/index.umd.js",
  "module": "./dist/lib/index.es.js",
  "types": "./dist/lib/index.d.ts",
  "files": ["dist/lib"],
  "peerDependencies": {
    "vue": "^3.x.x",
    "vuetify": "^3.x.x"
  }
}

4. 优先使用静态导入组件

组件库内部的子组件尽量使用静态导入，确保被打包进主库文件：

<!-- App.vue -->
<script setup>
// 静态导入，会被打包进主库文件
import ComponentA from '@components/ComponentA.vue'
import ComponentB from '@components/ComponentB.vue'
</script>

5. 重新构建并发布

修改配置后重新构建组件库，再发布到NPM仓库：

npm run build
npm publish

主项目重新安装最新版本的组件库后即可正常使用。

验证方法 #

安装更新后的组件库后，打开主项目node_modules/@my-scope/my-package/dist/lib/index.es.js，搜索子组件（如ComponentA）的代码，确认其已被打包进主文件，而非保留原始导入路径。

内容的提问来源于stack exchange，提问作者emonier