一文搞懂vue的依赖之间的关系

接到个项目需要,要求node版本10.x【一听真的好搞笑】的情况下使用vue3。

显然不可能用vite去创建项目了,支持node10的vite版本【0.20.x】可以追溯到4年前vite刚出世的时候,稍微稳定的版本都要node12.x了。既然vite不行,webpack行不行呢?

具体怎么创建省略...

创建完后的package.json,项目正常使用

js 复制代码
// ... 省略
 "dependencies": {
    "vue": "^3.2.47",
    "vue-router": "^4.2.5",
    "vuex": "^4.1.0",
    "webpack": "^4.47.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.15",
    "@vue/cli-plugin-eslint": "^4.5.15",
    "@vue/cli-plugin-typescript": "~4.5.19",
    "@vue/cli-service": "^4.5.19",
    "vue-loader": "^16.8.3",
    "@vue/compiler-sfc": "3.3.4",
  },
  "overrides": {
    "vue-loader": "^16.8.3"
  },

本来没什么问题,但是对于vue3.2这个版本之后很多新的特性在项目中无法使用 其中我开发中想要使用到defineComponents,我就没法使用,官方明确指出vue3.3+,于是我把项目的vue升级到 3.3.4这个版本

本来好好的,升级后更直接原地爆炸,意思是@vitejs/plugin-vue需要大于 3.2.13这个版本或 @vue/compiler-sfc 出现在依赖项树中,这不是已经安装了 @vue/compiler-sfc,而且版本是3.3.4,没什么问题啊。

中间绕了好久最终发现问题在 @vue/cli-service身上,它里面有个依赖 "vue-loader": "^15.9.2",,这个版本依赖的vue是 "vue": "^2.5.16",,但是我手动安装了vue-laoder版本,还是不行。最终把@vue/cli-service升级到5.0.8,这下应该没什么问题了吧,执行启动直接说node版本不支持

@vue/cli-service@5.0.8需要的版本node是12 或 14以上

有没有版本可以支持node10,手动修改 engines,或者通过补丁的方式

以下是同创建补丁的具体步骤
使用 patch-package 工具可以在安装包之后对 node_modules 中的文件进行持久修改,并在每次安装依赖时自动应用这些修改。下面是具体实现步骤:

1. 安装 patch-packagepostinstall-postinstall

首先,你需要安装 patch-packagepostinstall-postinstall 作为开发依赖:

lua 复制代码
bash
复制代码
npm install patch-package postinstall-postinstall --save-dev

2. 修改 @vue/cli-servicepackage.json

找到并修改你想要修改的包的文件。在你的情况中,是 node_modules/@vue/cli-service/package.json 中的 engines 字段。

  1. 打开 node_modules/@vue/cli-service/package.json

  2. 修改 engines 字段以包含你的 Node.js 版本。例如:

    json 复制代码
    json
    复制代码
    "engines": {
      "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
    }

3. 生成补丁文件

修改完成后,运行 patch-package 来生成补丁文件。这个文件会记录你的所有更改,以便在之后自动应用。

java 复制代码
bash
复制代码
npx patch-package @vue/cli-service

这会在你的项目根目录下创建一个 patches/ 目录,其中包含 @vue/cli-service+<version>.patch 文件。

4. 配置 postinstall 脚本

为了确保在每次运行 npm install 时应用补丁,你需要在 package.json 中添加一个 postinstall 脚本:

json 复制代码
json
复制代码
"scripts": {
  "postinstall": "patch-package"
}

如果你使用的是 Yarn,还需要添加一个额外的 postinstall 脚本来避免 Yarn 安装后自动删除 node_modules 中的修改:

json 复制代码
json
复制代码
"scripts": {
  "postinstall": "patch-package",
  "postinstall-postinstall": "patch-package"
}

5. 使用和管理补丁

以后每次你安装或更新依赖时,补丁文件都会自动应用到相应的包上。

  • 注意补丁文件 :如果你更新了 @vue/cli-service,可能需要重新生成或修改补丁文件。
  • 版本控制 :将 patches/ 目录添加到版本控制系统中,以确保其他开发者也能应用这些补丁。

例子

以下是一个完整的例子:

  1. 修改 package.json

    修改后的 @vue/cli-service package.json 文件可能如下所示:

    perl 复制代码
    json
    复制代码
    {
      "name": "@vue/cli-service",
      "version": "4.5.19",
      "engines": {
        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
      },
      ...
    }
  2. 生成补丁

    运行 npx patch-package @vue/cli-service 生成补丁。

  3. 配置 package.json

    添加 postinstall 脚本到你的项目 package.json

    json 复制代码
    json
    复制代码
    {
      "scripts": {
        "postinstall": "patch-package"
      },
      "devDependencies": {
        "patch-package": "^6.4.7",
        "postinstall-postinstall": "^2.1.0"
      }
    }

这样,你就可以在不修改 @vue/cli-service 包源码的情况下覆盖其 engines 设置。

很不幸人家要node12以上是有道理的

如果没有node10 的限制,完全可以把 @vue/cli-service升级到5.0.8,vue升级到3.3,很可惜,只能选择放弃,不过好歹有收获,了解下依赖之间的关系吧

相关推荐
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
尝尝你的优乐美6 小时前
vue3.0中h函数的简单使用
前端·javascript·vue.js
会发光的猪。7 小时前
如何使用脚手架创建一个若依框架vue3+setup+js+vite的项目详细教程
前端·javascript·vue.js·前端框架
别忘了微笑_cuicui7 小时前
vue中调用全屏方法、 elementUI弹框在全屏模式下不出现问题、多级嵌套弹框蒙层遮挡问题等处理与实现方案
前端·vue.js·elementui
计算机学姐9 小时前
基于Python的药房管理系统
开发语言·vue.js·后端·python·mysql·pycharm·django
放逐者-保持本心,方可放逐11 小时前
vue3 动态路由+动态组件+缓存应用
前端·vue.js·缓存
周末不下雨11 小时前
关于搭建前端的流程整理——node.js、cnpm、vue、初始化——创建webpack、安装依赖、激活
前端·vue.js·node.js
花开花落与云卷云舒11 小时前
新手 Vue 项目运行
前端·javascript·css·vue.js·前端框架·html·springboot