无法导入自定义Vue3组件库，浏览器提示‘组件缺少模板或渲染函数’

问题分析 #

你当前的组件库仅导出了用于全局注册的install方法，未单独对外暴露每个组件。当尝试局部导入单个组件时，要么导入的不是有效的Vue组件对象，要么打包产物不支持单个组件的按需导入，导致浏览器抛出该错误。

解决方案 #

1. 修改入口文件（src/index.js） #

同时导出单个组件和全局注册方法，兼顾全局与局部使用场景：

import VbButton from './components/Comm/VbButton.vue';
import VbInput from './components/Comm/VbInput.vue';

const components = {
  VbButton,
  VbInput,
}

const install = (app) => {
  Object.entries(components).forEach(([name, component]) => {
    app.component(name, component);    
  });
};

// 单独导出每个组件，支持局部导入
export { VbButton, VbInput };

// 导出全局注册用的install方法
export default { install };

2. 调整Vite配置（vite.config.js） #

配置多入口打包，为每个组件生成独立的可导入产物：

import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  build:{
    lib:{
      // 配置多入口：主库入口 + 单个组件入口
      entry: {
        vuebotics: resolve(__dirname, "src/index.js"),
        VbButton: resolve(__dirname, "src/components/Comm/VbButton.vue"),
        VbInput: resolve(__dirname, "src/components/Comm/VbInput.vue")
      },
      name: "VueBotics",
      // 根据入口名称生成对应打包文件名
      fileName: (format, entryName) => `${entryName}.${format}.js`
    },
    rollupOptions:{
      external:["vue"],
      output:{
        globals:{
          vue: "Vue",
        }
      }
    }
  },
  plugins: [vue()],
})

3. 更新package.json的exports字段 #

添加单个组件的导出映射，让用户可以直接通过库名导入单个组件：

{
  "name": "vuebotics",
  "version": "0.1.0",
  "type": "module",
  "files":["dist"],
  "main":"./dist/vuebotics.umd.js",
  "module": "./dist/vuebotics.es.js",
  "exports":{
    ".":{
      "import":"./dist/vuebotics.es.js",
      "require":"./dist/vuebotics.umd.js"
    },
    "./VbButton":{
      "import":"./dist/VbButton.es.js",
      "require":"./dist/VbButton.umd.js"
    },
    "./VbInput":{
      "import":"./dist/VbInput.es.js",
      "require":"./dist/VbInput.umd.js"
    },
    "./dist/style.css":"./dist/style.css"
  },
  // 其余配置保持不变
}

使用方式 #

局部导入单个组件 #

在App.vue中：

<script setup>
// 两种导入方式均可
import { VbButton } from 'vuebotics'
// import VbButton from 'vuebotics/VbButton'
</script>

<template>
  <VbButton>测试按钮</VbButton>
</template>

全局注册（原有方式不变） #

在main.js中：

import VueBotics from 'vuebotics'
import 'vuebotics/dist/style.css'

createApp(App).use(VueBotics).mount('#app')

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