很多人装前端环境时会遇到三类麻烦:Node 版本冲突、全局包杂乱、换电脑重装成本高。本文用 nvm-windows 管理多版本 Node,用 pnpm 提升安装速度与磁盘利用率,并把 VS Code 的关键配置做成“项目级可迁移清单”。
1)确认系统:Windows 11(或 Windows 10 也适用)。
2)建议安装 Windows Terminal(可选,但更好用)。
3)如果你公司网络需要代理,请先准备好可用的代理地址(后文给出 pnpm/npm 的配置位置)。
nvm-windows 的目标是:让你在同一台电脑上可以安装多个 Node 版本,并随时切换,避免“装了 A 项目又把 B 项目搞坏”。
安装完成后,打开 PowerShell 或 CMD,执行:
nvm version如果能看到版本号,说明 nvm-windows 可用。
建议优先使用 LTS(长期支持版本)。执行:
nvm list available nvm install lts nvm use lts node -v npm -v如果你需要某个特定版本(例如团队锁定 18.x 或 20.x),用 nvm install 20.11.1 这类方式安装即可。
从 Node 16+ 开始,Corepack 可以帮助你管理 pnpm/yarn 的版本。建议按以下顺序:
corepack enable corepack prepare pnpm@latest --activate pnpm -v如果你更喜欢直接装全局,也可以用 npm i -g pnpm,但 Corepack 更方便团队统一版本。
pnpm 会把依赖缓存到 store。你可以把 store 放到空间更大的盘(例如 D 盘):
pnpm config set store-dir D:\.pnpm-store pnpm config get store-dir如果你在公司内网,需要设置镜像或代理,推荐以团队统一策略为准;不确定时先保持默认,遇到下载慢再改。
1)统一格式化与保存行为:在项目根目录创建 .vscode/settings.json(示例):
{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "files.eol": "\n", "terminal.integrated.defaultProfile.windows": "PowerShell" }2)把常用脚本做成任务:创建 .vscode/tasks.json,把 pnpm dev、pnpm test、pnpm build 固化为一键运行。
3)让终端更稳定:优先使用 PowerShell 7(可选)或保持系统 PowerShell,避免项目脚本在不同 Shell 里行为不一致。
问题 A:提示找不到 node/npm/pnpm:多半是 PATH 没刷新。关掉终端重开,或重启 VS Code;仍不行就检查环境变量里是否有 nvm 的路径。
问题 B:切换 Node 后全局包不见了:这是正常现象。不同 Node 版本的全局包目录不同。建议减少全局包,更多依赖放进项目。
问题 C:安装依赖很慢:优先排查网络(公司代理/证书/镜像)。不要用不可信的“加速脚本”。
问题 D:权限报错(EPERM):尽量不要把项目放在系统受保护目录(如 Program Files)。把代码放到用户目录或独立盘符的工作目录。
1)装 nvm-windows;2)装并切换到团队约定的 Node 版本;3)启用 Corepack 并激活 pnpm;4)设置 pnpm store-dir;5)把 .vscode 目录随项目同步。
完成后,你的 Windows 前端环境就会更“可控、可切换、可迁移”。