如何创建同时兼容Vue 2.7与Vue 3的通用库？

1. vue-demi是否已经不再适用？ #

并没有。尤雨溪在Vue2.7发布说明里感谢vue-demi，是因为Vue2.7内置了Composition API，彻底解决了Vue2时代需要额外安装@vue/composition-api的痛点——而vue-demi最初的核心作用就是桥接「需要装composition-api的Vue2」和「自带composition-api的Vue3」。

现在vue-demi的价值依然存在：

• 如果你需要兼容Vue2.6及以下版本，vue-demi会自动检测环境，在低版本Vue2中自动引入@vue/composition-api，在Vue2.7+和Vue3中直接使用内置API，不用你自己写大量条件判断。
• 就算只兼容Vue2.7+和Vue3，vue-demi也能帮你抹平一些细微的API差异（比如defineProps在Vue2.7中需要显式导入，Vue3中是编译器宏），简化你的适配代码。

2. 为什么Vue3用@vitejs/plugin-vue，Vue2.7用@vitejs/plugin-vue2？ #

核心原因是Vue2和Vue3的编译、运行时逻辑差异极大：

• Vue3重写了模板编译器、组件实例逻辑，甚至单文件组件的内部处理规则都变了，@vitejs/plugin-vue是专门为Vue3的这些特性设计的，负责处理Vue3单文件组件的编译、热更新等开发时需求。
• Vue2.7虽然支持Composition API，但底层的编译器、运行时依然是Vue2的架构，@vitejs/plugin-vue2是针对Vue2的编译逻辑开发的，同时做了适配，支持Vue2.7新增的Composition API语法，能正确处理Vue2.7的单文件组件。

简单说，这两个插件是为不同的Vue内核服务的，没法通用。

3. 现在如何创建兼容Vue2.7+和Vue3的通用库？ #

分两种场景处理：

场景一：需要兼容Vue2.6及以下 + Vue2.7 + Vue3 #

继续使用vue-demi作为桥接层：

• 项目依赖中安装vue-demi，并将vue和@vue/composition-api声明为peerDependencies。
• 库的核心代码完全用Composition API编写，所有Vue相关的导入都从vue-demi引入（比如import { ref, defineComponent } from 'vue-demi'）。
• 打包工具（比如Rollup或Vite）的配置中，确保正确解析vue-demi的条件导出，让打包后的代码能根据用户的Vue版本自动适配。

场景二：仅兼容Vue2.7+和Vue3 #

可以选择两种方案：

• 方案A：依然用vue-demi：省去自己处理API差异的麻烦，代码写法和场景一一致，只是peerDependencies只需要声明vue: ^2.7.0 || ^3.0.0，不用再包含@vue/composition-api。
• 方案B：手动适配：直接从vue导入API，针对差异点做条件判断。比如处理defineProps：

  import { defineProps as vueDefineProps } from 'vue'
  
  // 在Vue3中，defineProps是编译器宏，不需要导入；Vue2.7中需要显式导入
  export const defineProps = typeof defineProps === 'function' ? defineProps : vueDefineProps
  

  打包时通过Rollup的条件导出或者Vite的多入口配置，分别生成适配Vue2和Vue3的版本，在package.json中声明不同环境的入口。

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