为什么我在使用 vue-sfc-rollup 构建的 Vue 2 组件库中使用 Vue 2 Composition API 时会出错？答案

【问题标题】：Why do I get an error when I use the Vue 2 Composition API in a Vue 2 component library built with vue-sfc-rollup?为什么我在使用 vue-sfc-rollup 构建的 Vue 2 组件库中使用 Vue 2 Composition API 时会出错？
【发布时间】：2021-09-02 01:32:27
【问题描述】：

我正在使用vue-sfc-rollup 构建一个组件库。该库以 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 中，我将 Composition API 安装为插件。

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

Vue.use(VueCompositionApi)

然后，在App.vue 中，我从我的库中导入了一个组件进行测试。

import { MyComponent } from '@mypackage/components'

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

但是，当我在浏览器中运行它时，我收到以下错误。

data() 中的错误：“TypeError: Cannot read property 'config' of null”

从main.ts 中删除Vue.use(VueCompositionApi) 可以消除错误，但组件不会加载。所以看来问题是我的组件没有正确注册组合 API 的存在。

【问题讨论】：

标签： vue.js vuejs2 rollupjs vue-composition-api

【解决方案1】：

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

在build/rollup.config.js 中搜索const external 并将@vue/composition-api 添加到列表中。

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

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

感谢this post on Github 引导我使用external 配置和 this example rollup.config.js 的帖子链接显示了它应该去的地方。

【讨论】：