在使用Vue sfc汇总构建的Vue 2组件库中使用Vue 2 Composition API时，为什么会出现错误？

Question

我正在使用vue sfc汇总构建一个组件库。该库以Vue 2为目标，但使用Vue 2 Composition API，以便在时机成熟时更容易移植到Vue 3。

将库发布到npm后，我使用Vue CLI创建了一个空白Vue 2项目（启用TypeScript以Vue 2为目标）。

npm install <my_package>
npm install @vue/composition-api

在main.ts中，我安装了组合API作为插件。

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

Vue.use(VueCompositionApi)

然后，在应用程序中。vue我从库中导入了一个组件进行测试。

import { MyComponent } from '@mypackage/components'

export default Vue.extend({
  components: {
    MyComponent,
  }
})

然而，当我在浏览器中运行这个时，我得到了以下错误。

数据（）中的错误：“TypeError:无法读取null的属性'config'”

正在删除Vue。使用（VueCompositionApi）frommain。ts消除错误，但组件不会加载。因此，问题似乎是我的组件没有正确注册Composition API的存在。

Answer 1

问题是需要告诉汇总库有外部依赖项。

在构建/汇总中。配置。js搜索const external并将@vue/composition api添加到列表中。

const external = [
  'vue',
  '@vue/composition-api',  // <-- add this!
]

然后只需构建、发布到npm，npm在使用包的项目中更新包，它应该可以正常工作。

感谢Github上的这篇文章将我引导到外部配置和这个示例rollup.config.js的帖子链接准确地显示了它应该去哪里。