如何将第三方包的Vue依赖转为peerDependencies以避免重复实例？

针对你遇到的第三方包将Vue列为dependencies导致重复实例的问题，有几种可行的解决办法：

1. 用Webpack别名强制统一Vue版本 #

因为Laravel Mix基于Webpack，你可以在webpack.mix.js中配置别名，让所有依赖都指向项目根目录安装的Vue版本，忽略第三方包自带的Vue：

const path = require('path');

mix.webpackConfig({
  resolve: {
    alias: {
      // 根据你的Vue版本选择对应的文件，runtime版本适合大多数单页应用场景
      'vue$': path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      // 如果是完整版本（需要编译器），改用：path.resolve(__dirname, 'node_modules/vue/dist/vue.esm.js')
    }
  }
});

配置后，所有import Vue的调用都会解析到你项目中的Vue实例，避免重复加载。

2. 使用包管理器的依赖覆盖功能 #

npm（8.x及以上）和Yarn都支持强制替换依赖版本，直接在package.json中指定目标包的Vue依赖为你项目的版本：

对于npm： #

"overrides": {
  "vue-cron-editor": {
    "vue": "^3.2.0" // 替换为你项目实际使用的Vue版本
  },
  "element-tiptap": {
    "vue": "^3.2.0"
  }
}

对于Yarn： #

"resolutions": {
  "vue-cron-editor/vue": "^3.2.0",
  "element-tiptap/vue": "^3.2.0"
}

执行npm install或yarn install后，这些第三方包会强制使用你指定的Vue版本，不会单独安装自己的依赖副本。

3. 用补丁工具修改第三方包的依赖声明（应急方案） #

如果上述方法无效，可以修改第三方包的package.json，将Vue从dependencies移到peerDependencies，并使用patch-package持久化修改：

1. 安装补丁工具：

npm install patch-package --save-dev

2. 找到node_modules中目标包的package.json，将dependencies中的vue条目删除，添加到peerDependencies：

"peerDependencies": {
  "vue": "^3.0.0" // 匹配你的Vue版本范围
}

3. 生成补丁文件：

npx patch-package vue-cron-editor element-tiptap

4. 之后每次执行npm install，补丁都会自动应用到对应的包上，无需手动重复修改。

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