Vue2.7项目中node_modules内Composition Api失效问题求助

问题描述 #

环境信息 #

• package.json截图：
• vue.config.js配置：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

复现步骤 #

• 创建Vue2.7组件库；
• 使用const num = ref(0)这类Composition API；
• 执行yarn link命令；
• 在'my-vue2.7-project'项目中执行yarn link关联该组件库；
• ref无法正常工作。

预期结果 #

希望Composition API能在node_modules中正常运行。

解决方案 #

这个问题核心是yarn link后组件库和主项目加载了两份独立的Vue实例，Composition API的响应式系统依赖同一个Vue实例，因此出现失效情况。解决步骤如下：

1. 统一Vue版本
   确保组件库和主项目package.json里的vue版本完全一致（均为2.7.x系列），避免版本差异导致实例冲突。

2. 组件库配置：将Vue设为外部依赖
   修改组件库的vue.config.js，添加externals配置，禁止打包时把Vue内置到组件库，强制复用主项目的Vue实例：

// 组件库的vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    externals: {
      vue: 'Vue'
    }
  }
})

3. 组件库配置：声明Vue为peer依赖
   在组件库的package.json中添加peerDependencies，明确要求主项目提供Vue依赖：

{
  "peerDependencies": {
    "vue": "^2.7.0"
  }
}

4. 重新构建并关联组件库
   在组件库中执行yarn install && yarn build，然后在主项目中重新执行yarn link your-component-library-name，确保依赖关系生效。

5. 主项目配置：转译组件库（可选）
   如果组件库用了未转译的语法，在主项目的vue.config.js中把组件库名称加入transpileDependencies：

// 主项目的vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: ['your-component-library-name']
})

完成以上步骤后，组件库会复用主项目的Vue实例，Composition API即可正常工作。

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