Vue3 + Vite4 Library Mode组件库引用时@angular/core解析错误排查

核心问题 #

你的Vue组件库构建产物中意外混入了Angular的依赖导入——这完全不符合预期，因为你的组件库基于Vue开发，根本不需要Angular相关依赖。错误中提到的fesm5/my-library.js是Angular库的典型产物结构，说明你的发布包存在文件错误或配置问题。

排查步骤与解决方法 #

1. 检查组件库源代码 #

• 确认MeuCompo.vue和入口文件（如src/index.js）中无任何Angular相关导入语句，比如import { ... } from '@angular/core'，避免代码层面的误引入。

2. 修正Vite构建配置 #

你的组件库不依赖Angular，无需在external中添加@angular/core，需确保构建配置正确生成Vue库产物：

// 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: 'MinhaBiblioteca',
      fileName: (format) => `minha-biblioteca.${format}.js`
    },
    rollupOptions: {
      // 仅external Vue，因为你的库基于Vue构建
      external: ['vue'],
      output: {
        // 为Vue提供全局变量，适配UMD/IIFE格式
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

3. 验证构建产物 #

运行yarn build后，查看dist目录下的文件：

• 打开构建后的JS文件（如minha-biblioteca.es.js），搜索是否存在@angular/core的导入语句。若不存在，说明构建配置已修复；若仍存在，继续排查代码是否有隐藏的Angular依赖。

4. 修正package.json入口字段 #

确保package.json中的main、module、exports指向正确的Vite构建产物，而非错误的Angular风格文件：

{
  "name": "@carlos.pauluk/minha-biblioteca",
  "main": "./dist/minha-biblioteca.umd.js",
  "module": "./dist/minha-biblioteca.es.js",
  "exports": {
    ".": {
      "import": "./dist/minha-biblioteca.es.js",
      "require": "./dist/minha-biblioteca.umd.js"
    }
  }
}

5. 重新发布组件库 #

• 先执行npm pack本地打包，解压后检查包内文件是否正确（仅包含Vue库产物、源代码、package.json等，无Angular相关文件）。
• 确认无误后，更新版本号并重新发布到npm：npm publish。

6. 在测试项目中重装依赖 #

在你的Vue测试项目中，卸载旧包并安装最新版本：

yarn remove @carlos.pauluk/minha-biblioteca
yarn add @carlos.pauluk/minha-biblioteca

之后运行yarn dev，即可解决@angular/core的解析错误。

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