VueDemi适配问题：Vue3开发的库在Vue2.6中组件不渲染

针对你遇到的组件库在Vue2.6项目中仅console.log执行但组件不渲染的问题，以下是几个排查和解决方向：

1. 确保Vue2.6项目安装并注册@vue/composition-api #

VueDemi在Vue2环境下依赖@vue/composition-api才能正常工作，即使组件用的是选项式API。你的package.json将其标记为可选依赖，但Vue2.6项目必须手动安装并注册：

npm install @vue/composition-api --save

在Vue2项目入口文件（如main.js）中注册插件：

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

2. 锁定VueDemi版本并触发适配模式 #

latest版本的vue-demi可能存在版本兼容问题，建议锁定一个稳定版本，比如^0.14.6。同时，由于你的库基于Vue3构建，需要确保VueDemi在Vue2项目中切换到适配模式：

• 在库的package.json中添加postinstall脚本，自动触发适配：

"scripts": {
  // 其他脚本
  "postinstall": "vue-demi-switch"
}

• 或让Vue2项目用户手动执行适配命令：

npx vue-demi-switch 2

3. 修正Vite构建的外部依赖配置 #

你的vite.config.js仅排除了vue-demi，但vue作为peer依赖也需要排除，避免打包进Vue3代码导致Vue2项目冲突：

rollupOptions: {
  external: ['vue-demi', 'vue'],
  output: {
    globals: {
      "vue-demi": "VueDemi",
      "vue": "Vue"
    }
  }
}

4. 确认组件导出方式适配双版本 #

在src/index.js中使用VueDemi的defineComponent导出组件，确保在Vue2和Vue3环境下都能被正确识别：

import { defineComponent } from 'vue-demi'
import TestComponent from './TestComponent.vue'

export const TestComponent = defineComponent(TestComponent)

5. 排查Vue2项目的组件引入方式 #

尝试用UMD方式引入组件测试，排查是否是模块解析问题：

<script src="path/to/vue.js"></script>
<script src="path/to/@vue/composition-api.js"></script>
<script src="path/to/your-library.umd.cjs"></script>
<script>
new Vue({
  el: '#app',
  components: { TestComponent: window.GlobalSearch }
})
</script>

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