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.
相关推荐
UXbot2 小时前
AI原型设计工具如何支持团队协作与快速迭代
前端·交互·个人开发·ai编程·原型模式
ZC跨境爬虫3 小时前
跟着MDN学HTML_day_48:(Node接口)
前端·javascript·ui·html·音视频
PieroPc4 小时前
CAMWATCH — 局域网摄像头监控系统 Fastapi + html
前端·python·html·fastapi·监控
巴巴博一5 小时前
2026 最新:Trae / Cursor 一键接入 taste-skill 完整教程(让 AI 前端告别“AI 味”)
前端·ai·ai编程
kyriewen5 小时前
半夜三点线上崩了,AI替我背了锅——用AI排错,五分钟定位三年老bug
前端·javascript·ai编程
kyriewen6 小时前
我让 AI 当了 24 小时全年无休的“毒舌考官”
前端·ci/cd·ai编程
hexu_blog6 小时前
vue+java实现图片批量压缩
java·前端·vue.js
IT_陈寒6 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
lifejump7 小时前
Empire(帝国)CMS 7.5 XSS注入
前端·安全·xss