基于Quasar的Vite组件库无法解析Quasar组件问题求助

我正在开发一款基于Quasar组件构建的企业标准组件库，在项目中使用该库时出现如下错误：

[Vue warn]: Failed to resolve component: q-input。如果这是原生自定义元素，请确保通过compilerOptions.isCustomElement将其排除在组件解析范围外。

组件库的vite.config.js配置如下：

import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from "vite-plugin-dts";
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import { viteStaticCopy } from 'vite-plugin-static-copy'
import { dependencies, peerDependencies } from './package.json';

export default defineConfig({
  plugins: [
    vue(),
    dts({
      insertTypesEntry: true,
    }),
    viteStaticCopy({
      targets: [
        { src: '../dev/src/style/*', dest: 'style' }
      ]
    })
  ],
  build: {
    lib: {
      entry: resolve(__dirname, '../dev/src/lib/index.ts'),
      name: 'MyComponents',
      fileName: 'my-components'
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      external: [...Object.keys(peerDependencies), ...Object.keys(dependencies)],
      output: {
        // Provide global variables to use in the UMD build for externalized deps
        globals: {
          'vue': 'Vue',
          'vue-router': 'vueRouter',
          'axios': 'axios',
          'quasar': 'quasar',
          'moment': 'moment'
        }
      },
      plugins: [
        peerDepsExternal()
      ]
    }
  }
})

库中未使用Quasar组件的组件可正常运行，预期行为是库中的Quasar组件能自动导入，当前临时方案是在库中定义install函数全局注册用到的Quasar组件：

export const myPlugin = {
    install(app: App) {
        app.component("q-input", QInput);
        app.component("q-icon", QIcon);
        app.component("q-toolbar-title", QToolbarTitle);
        app.component("q-space", QSpace);
        app.component("q-toolbar", QToolbar);
        app.component("q-header",QHeader);
        app.component("q-btn", QBtn);
    }
}

组件库的打包配置中将quasar列为了外部依赖（external数组包含quasar），这意味着打包时不会将Quasar组件代码打包进库文件。而使用该组件库的项目如果没有配置Quasar组件的自动导入，也没有全局注册这些组件，就会触发组件无法解析的错误。

方案1：在使用组件库的项目中配置Quasar自动导入 #

允许使用方自行配置，通过自动导入插件实现Quasar组件按需引入：

1. 安装依赖：

npm install unplugin-auto-import unplugin-vue-components -D

2. 修改项目的vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { QuasarResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [QuasarResolver()],
    }),
    Components({
      resolvers: [QuasarResolver()],
    }),
  ],
})

方案2：在组件库内部配置自动导入Quasar组件 #

让组件库自身处理Quasar组件的导入，降低使用方配置成本：

1. 在组件库项目中安装依赖：

npm install unplugin-auto-import unplugin-vue-components -D

2. 修改组件库的vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from "vite-plugin-dts";
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import { viteStaticCopy } from 'vite-plugin-static-copy'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { QuasarResolver } from 'unplugin-vue-components/resolvers'
import { dependencies, peerDependencies } from './package.json';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [QuasarResolver()],
      dts: true, // 生成类型声明文件
    }),
    Components({
      resolvers: [QuasarResolver()],
      dts: true,
    }),
    dts({
      insertTypesEntry: true,
    }),
    viteStaticCopy({
      targets: [
        { src: '../dev/src/style/*', dest: 'style' }
      ]
    })
  ],
  // 原有打包配置保持不变
})

方案3：优化临时全局注册方案 #

如果倾向于保留全局注册方式，可优化代码提升可维护性：

import { App } from 'vue'
import { QInput, QIcon, QToolbarTitle, QSpace, QToolbar, QHeader, QBtn } from 'quasar'

const quasarComponents = {
  QInput,
  QIcon,
  QToolbarTitle,
  QSpace,
  QToolbar,
  QHeader,
  QBtn
}

export const myPlugin = {
  install(app: App) {
    Object.entries(quasarComponents).forEach(([name, component]) => {
      app.component(name.toLowerCase(), component)
    })
  }
}

若要实现"自动导入"的预期行为，推荐方案1或方案2，其中方案2更适配组件库封装场景；方案3是对临时方案的优化，适合希望保持全局注册逻辑的场景。

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