Vue入门到精通五之yarn部署项目

什么是Yarn

Yarn 是一个快速、可靠、安全的 JavaScript 包管理器,由 Facebook、Google、Exponent 和 Tilde 联合开发,用于替代 npm。

核心价值

维度 优势 解决痛点
速度 并行安装、缓存机制 npm 串行安装慢
可靠性 锁文件 yarn.lock 跨环境依赖版本一致
安全性 校验包完整性 防止包被篡改
离线能力 缓存已安装包 无网时可复用缓存

关键机制

1. 并行安装

复制代码
Yarn: [A][B][C][D] 同时下载(多线程)
npm:  [A]→[B]→[C]→[D] 顺序下载(单线程)

2. 锁文件(yarn.lock)

复制代码
# yarn.lock 示例
vue@3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0.tgz"
  integrity sha512-xxx
  dependencies:
    "@vue/shared" "^3.0.0"

作用:确保团队所有成员安装的依赖版本完全一致

对比 npm

特性 Yarn npm
安装速度 更快(并行) 较慢(串行)
锁文件 yarn.lock(默认) package-lock.json(npm 5+)
工作空间 原生支持(Monorepo) npm workspaces(较晚支持)
离线安装 原生支持 有限支持
缓存 全局缓存 局部缓存

核心命令对比

操作 Yarn npm
初始化 yarn init npm init
安装依赖 yarn install npm install
添加依赖 yarn add <包> npm install <包>
添加开发依赖 yarn add <包> -D npm install <包> --save-dev
删除依赖 yarn remove <包> npm uninstall <包>
运行脚本 yarn run <脚本> npm run <脚本>
全局安装 yarn global add <包> npm install -g <包>

使用场景

大型项目

  • Monorepo 架构(如多个子项目共享依赖)
  • 依赖包数量多(1000+),需要快速安装

团队协作

  • 强调跨环境一致性(CI/CD、开发/生产环境)

性能敏感

  • CI/CD 流程中依赖安装时间过长

离线需求

  • 内网环境或不稳定的网络环境

实际案例

场景:优化 CI/CD 构建时间

原方案(npm):

复制代码
npm install  # 耗时 3分钟

改用 Yarn:

复制代码
yarn install  # 耗时 45秒(缓存命中)

时间节省:75%

💡 现实建议

场景 推荐工具
新项目、追求速度 Yarn
遗留项目、团队习惯 保持现有工具
Monorepo Yarn 或 pnpm
极简需求 npm(已足够)

实战部署

这里我们部署一个 广告后台管理的项目,命令如下:

bash 复制代码
yangyanping@yangyaningdeAir ad_admin % yarn cache clean
yarn cache v1.22.22
success Cleared cache.
✨  Done in 6.09s.
yangyanping@yangyaningdeAir ad_admin % yarn install
yarn install v1.22.22
[1/4] 🔍  Resolving packages...
success Already up-to-date.
$ husky install
husky - Git hooks installed
✨  Done in 3.96s.
yangyanping@yangyaningdeAir ad_admin % yarn serve
yarn run v1.22.22
$ vue-cli-service serve
 INFO  Starting development server...
[92%] sealing (asset processing ThemeColorReplacer)


 DONE  Compiled successfully in 13157ms                                                                              22:47:29


  App running at:
  - Local:   http://localhost:8011/ 
  - Network: http://192.168.31.90:8011/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
相关推荐
提子拌饭1339 分钟前
个人月事记录表应用 - 鸿蒙PC Electron框架完整实现指南
前端·javascript·华为·electron·前端框架·开源·鸿蒙系统
超人气王16 分钟前
新手学前端JS浅拷贝和深拷贝:对象复制竟然是个“替身文学”?
javascript·面试
YHL17 分钟前
📚 JS执行机制(执行上下文 + 调用栈 + 编译流程)
前端·javascript
不简说23 分钟前
这次真香!sv-print 可视化打印设计器更新:插件脚手架、Excel 导出、弹窗 API 三连发
前端·javascript·前端框架
无聊的老谢27 分钟前
Web GIS 最佳实践:Vue 集成 Leaflet/OpenLayers 实现基站海量点位渲染
前端·javascript·vue.js
yingyima31 分钟前
GCP Cloud Scheduler 核心语法与实战示例速查手册
前端
用户573501072520631 分钟前
Elpis 项目阶段性总结 - 基于 vue3 完成领域模型架构建设
前端
东风破_36 分钟前
V8 如何执行你的代码——编译、上下文与调用栈
javascript
假如让我当三天老蒯38 分钟前
为什么 setData 能获取到 prev 参数?(自学用)
前端·react.js
AskHarries1 小时前
Workspace:文件系统、项目上下文和执行边界
java·服务器·前端