Vue 2.7插件用Composition API的provide/inject遇npm link报错求助

核心原因分析 #

本地运行正常但npm link后报错，大概率是插件与宿主项目依赖的Vue实例不共享，导致Composition API的上下文无法正确识别；其次可能是插件打包配置错误或代码中provide/inject调用时机不符合规范。

分步解决建议 #

1. 消除重复Vue依赖 #

当使用npm link时，插件和宿主项目可能各自加载了一份Vue，导致上下文隔离。解决方式：

• 在插件项目目录下执行命令，强制插件使用宿主项目的Vue：

  npm link ../宿主项目路径/node_modules/vue
  

• 或者在宿主项目的Vite配置中添加别名，强制指向同一Vue实例：

  // vite.config.js（宿主项目）
  import path from 'path'
  
  export default {
    resolve: {
      alias: {
        'vue': path.resolve(__dirname, 'node_modules/vue')
      }
    }
  }
  

2. 修正插件的依赖与打包配置 #

• package.json配置：将Vue设为peerDependencies，避免插件打包时内置Vue：

  {
    "peerDependencies": {
      "vue": "^2.7.0"
    },
    "devDependencies": {
      "vue": "^2.7.0" // 仅开发环境依赖
    }
  }
  

• Vite打包配置：将Vue标记为外部依赖，确保打包后的插件不包含Vue代码：

  // 插件项目的vite.config.js
  export default {
    build: {
      lib: {
        entry: 'src/Plugin.js',
        name: 'YourPluginName',
        formats: ['es', 'umd']
      },
      rollupOptions: {
        external: ['vue'],
        output: {
          globals: {
            vue: 'Vue' // 全局变量映射，适配UMD格式
          }
        }
      }
    }
  }
  

3. 确保provide/inject调用时机合规 #

• 插件全局provide：在install函数中使用app.provide（Vue 2.7的app实例支持该方法），而非直接调用provide()：

  // Plugin.js
  import ParentComponent from './Parent.vue'
  
  export default {
    install(app) {
      // 全局注入
      app.provide('globalKey', 'globalValue')
      app.component('ParentComponent', ParentComponent)
    }
  }
  

• 组件内调用：所有provide/inject必须在<script setup>或组件的setup函数内部执行：

  <!-- Parent.vue -->
  <script setup>
  import { provide } from 'vue'
  // 仅在setup内部调用
  provide('childKey', 'parentData')
  </script>
  

  <!-- Child.vue -->
  <script setup>
  import { inject } from 'vue'
  const childData = inject('childKey')
  </script>
  

4. 验证宿主项目配置 #

• 确认宿主项目的Vue版本为2.7.x，确保支持Composition API；
• 宿主项目main.js中正确安装插件：

  import Vue from 'vue'
  import YourPlugin from 'your-plugin-name'
  
  Vue.use(YourPlugin)
  
  new Vue({
    render: h => h(App)
  }).$mount('#app')
  

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