Vue3+Vite5组件库集成FontAwesome构建后引入报错求助

问题描述 #

使用Vue3和Vite5开发自定义组件库，本地执行vite命令运行项目时，组件内的FontAwesome图标显示正常；但将库构建后引入其他项目时，浏览器抛出警告：

[Vue warn]：无法解析组件：font-awesome-icon
如果这是原生自定义元素，请确保通过compilerOptions.isCustomElement将其排除在组件解析之外。

原库内FontAwesome使用配置 #

1. main.ts配置 #

import { createApp } from 'vue';
import App from './App.vue';
import './assets/styles/main.css';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';

library.add(faChevronDown);

const app = createApp(App);
app.component('font-awesome-icon', FontAwesomeIcon);
app.mount('#app');

2. Dropdown.vue组件内使用 #

<!-- some code here -->
        <span>
          <font-awesome-icon icon='fa-solid fa-chevron-down' />
        </span>
<!-- some code here -->

3. 库的vite.config.ts配置 #

import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [Vue({ style: { filename: 'style.css' } })],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        @use "./src/assets/styles/styles.scss";
        @import './src/assets/styles/vars';
        `,
      },
    },
  },
  build: {
    outDir: './dist',
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'my-lib-name',
      formats: ['es'],
      fileName: (format) => `${'my-lib-name'}.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: { vue: 'Vue' },
      },
    },
  },
  resolve: {
    alias: [{
      find: 'public',
      replacement: resolve(__dirname, './public'),
    }],
  },
});

无效尝试 #

• 使用vite的optimizeDeps选项引入FontAwesome依赖
• 在宿主项目手动安装相关包

解决方法（2024年2月23日更新） #

调整FontAwesome的集成逻辑，步骤如下：

1. 保留FontAwesome为库的依赖：不要将FontAwesome相关包设为devDependencies，确保用户安装你的组件库时会自动拉取这些依赖。
2. 组件内单独管理图标注册：将library.add(...)的代码从库的main.ts移至对应组件内部，让每个使用图标的组件自行导入并注册所需图标。
3. 宿主项目全局注册组件：告知组件库用户，在他们项目的main.ts中添加以下代码，全局注册FontAwesomeIcon组件：

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
app.component('font-awesome-icon', FontAwesomeIcon);

调整后，组件库构建后引入其他项目时，即可正常解析font-awesome-icon组件，不再出现警告。感谢José Ramirez的帮助！

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