vue-sfc-rollup构建的Vue2组件库使用Composition API报错如何解决

该报错是因为你打包组件库时将@vue/composition-api打包进了产物，导致测试项目中存在两份不同的Composition API实例：

• 一份是测试项目自己安装、已在main.ts完成注册的实例
• 另一份是组件库内部自带、未完成注册的实例
  你的组件调用了未注册的那份实例，无法获取到Vue实例的config属性，因此抛出错误。

1. 调整组件库依赖配置 #

打开组件库的package.json，将@vue/composition-api从dependencies移除，分别加入peerDependencies和devDependencies：

{
  "peerDependencies": {
    "@vue/composition-api": "^1.7.0",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/composition-api": "^1.7.0",
    "vue": "^2.6.14"
  }
}

该配置会告知打包工具不要将@vue/composition-api打进组件库产物，运行时直接复用业务项目侧安装的版本。 #

2. 调整rollup打包配置 #

修改vue-sfc-rollup生成的rollup配置文件，将@vue/composition-api加入外部依赖列表：

// rollup.config.js
export default {
  // 其他原有配置保持不变
  external: [
    'vue',
    '@vue/composition-api',
    // 其他不需要打包进组件库的依赖也可以加在这里
  ]
}

3. 重新发布验证 #

修改完配置后重新打包组件库，发布新版本到npm。测试项目卸载旧版本的组件包，重新安装新版本后重启项目即可解决报错。

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