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.
相关推荐
指尖的记忆11 小时前
前端 Monorepo 实战指南:仓库多到切疯?
前端
csdn2015_11 小时前
java 把对象转化为json字符串
java·前端·json
shughui12 小时前
Fiddler(二):自动转发(AutoResponder)功能详解
前端·测试工具·fiddler
初见雨夜12 小时前
OpenAI 官方出手:把 Codex 接进 Claude Code
前端·openai·ai编程
前端付豪12 小时前
实现消息级操作栏
前端·人工智能·后端
GISer_Jing12 小时前
Claude Code的「渐进式披露」——让AI Agent从“信息过载”到“精准高效”
前端·人工智能·aigc
apcipot_rain12 小时前
HTML知识概述
前端·javascript·html
计算机学姐12 小时前
基于SpringBoot的新能源充电桩管理系统
java·vue.js·spring boot·后端·mysql·spring·java-ee
leiming612 小时前
巧用 FreeRTOS 任务通知作“邮箱”:NeoPixel 灯环控制实战
java·前端·算法
茶底世界之下12 小时前
Harbeth:高性能Metal图像处理库,让你的图片处理速度飞起来!
前端·github·swift