Vue+Vite自定义组件库导入后依赖无法解析问题求助

• 检查组件库Vite打包配置
  组件库的vite.config.js必须正确配置库模式，确保打包输出符合规范：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import { resolve } from 'path'
  
  export default defineConfig({
    plugins: [vue()],
    build: {
      lib: {
        entry: resolve(__dirname, 'src/index.js'), // 库的入口文件路径
        name: 'PrivateLibrary',
        fileName: (format) => `private-library.${format}.js`,
      },
      rollupOptions: {
        external: ['vue'], // 排除Vue，由宿主项目提供
        output: {
          globals: { vue: 'Vue' }, // UMD格式的全局变量映射
        },
      },
    },
  })
  

• 确认入口文件的组件导出
  库的入口文件（如src/index.js）要明确导出test-component：

  import TestComponent from './components/TestComponent.vue'
  
  // 命名导出
  export { TestComponent }
  // 或批量导出所有组件
  // export * from './components'
  

• 完善组件库package.json配置
  组件库的package.json必须指定入口字段，让Vite能识别正确的文件：

  {
    "name": "privatelibrary",
    "main": "./dist/private-library.umd.js",
    "module": "./dist/private-library.es.js",
    "exports": {
      ".": {
        "import": "./dist/private-library.es.js",
        "require": "./dist/private-library.umd.js"
      }
    }
  }
  

  注意name字段必须和宿主项目依赖中的包名完全一致。

• 验证本地包安装路径
  宿主项目package.json中的依赖路径要准确：

  "dependencies": {
    "privatelibrary": "file:../dist"
  }
  

  执行npm install后，检查node_modules/privatelibrary下是否包含完整的dist目录和正确的package.json。

• 规范组件导入方式
  导入语法要和库的导出方式匹配：

  // 命名导出的情况
  import { TestComponent } from 'privatelibrary'
  

• 清理缓存重新构建

  1. 删除组件库dist目录，重新执行npm run build
  2. 删除宿主项目node_modules/.vite缓存，重启npm run dev
  3. 必要时删除宿主项目node_modules和package-lock.json，重新安装依赖

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