本地前端环境配置
[一]Nodejs 安装
下载 Nodejs，下载地址，按照提示安装即可，记得选择将 Nodejs 增加到 PATH 一项，如果界面上没有，应该就是默认帮你搞定了，可以忽略。
安装完成后，通过命令，验证是否安装成：
node -v
npm -v如果正常显示版本号，即安装成功。
[二]Nodejs 配置
Nodejs 安装完成之后，默认会将 Node.exe 的路径，添加到系统的环境变量中，如果没有请手动添加。
Nodejs 默认的缓存目录和全局安装目录都在系统盘，会占用大量的系统盘空间，所以建议修改，如果不想修改，请跳过此部分内容。
[1]配置 prefix 和 cache 目录
prefix 就是 Nodejs 来全局安装的位置，cache 就是 Nodejs 依赖下载缓存的目录
- 改变 npm prefix 全局安装位置
假设你所指定的根目录地址为：C:\Program Files\nodejs
npm config set prefix “C:\Program Files\nodejs\node_global”- 改变 npm cache 缓存位置
假设你所指定的根目录地址为：C:\Program Files\nodejs
npm config set cache “C:\Program Files\nodejs\node_cache[2]配置环境变量
Nodejs 在安装过程中，会自动配置 Path 环境变量。但这个环境变量只是针对 Node 和 Npm 有效。对于一些全局安装的应用，例如 @vue/cli，如果不配置环境变量，它的相关命令是无法正常执行的。
右键点击 Windows 左下角的 Windows 图标，选择 系统—>高级系统设置—>环境变量。
- 在
系统变量栏中，点击新建，弹出编辑系统变量对话框。- 在
变量名(N)中，输入变量名称NODE_PATH - 在
变量值(V)中，输入上一步中指定的prefix加上node_modules文件夹，如下所示，请根据实际情况修改
- 在
C:\Program Files\nodejs\node_global\node_modules点击 编辑系统变量 对话框中的【确定】按钮，保存配置。
提示
这个值就是上一步中，通过 “npm config set prefix” 设置的值。可以，用下面命令查看
npm config get prefix切记，一定要加上
\node_modules。因为，有些全局应用是安装在C:\Program Files\nodejs\node_global\node_modules目录下
- 在
用户变量栏中， 找到Path变量，点击编辑， 弹出编辑环境变量对话框
在 编辑环境变量 对话框中，添加 C:\Program Files\nodejs\node_global\
这个值就是上一步中，通过 “npm config set prefix” 设置的值。
至此，Node 相关的环境变量配置完成。
[3]配置阿里源
将 Npm 的下载源，修改为阿里源，可以提升依赖包下载速度，执行一下命令设置。
npm config set registry https://registry.npmmirror.com/ （新的镜像仓库地址）[三] Pnpm 安装和配置
[1]Pnpm 简介
一个现代的包管理工具，名字叫做 pnpm，英文里面的意思叫做 performant npm ，意味“高性能的 npm”，官网地址可以参考 PNPM。
pnpm 相比较于 yarn/npm 这两个常用的包管理工具在性能上也有了极大的提升，根据目前官方提供的 benchmark 数据可以看出在一些综合场景下比 npm/yarn 快了大概两倍：
[2]Pnpm 安装(v11)
Nodejs 安装完成之后，执行以下命令进行 Pnpm 的安装和验证
重要
自 Dante Cloud v4.0.6.2 版本起，前端工程改用 Pnpm v11。Pnpm v11 改用 sqllite 作为存储引擎，减少大量系统调用、文件读取、重复解析。Pnpm v11 需要使用 Nodejs v22 及以上版本。
// 全局安装pnpm
npm install -g pnpm
// 查看 pnpm 版本，能够输出版本号说明安装成功
pnpm --version[3]Pnpm 配置环境变量（Windows）
生成 pnpm 环境变量可以直接使用下面命令：
pnpm setup该命令会帮助生成 PNPM_HOME 环境变量。
也可以在 用户环境变量 中手动进行添加。
// 新建环境变量 PNPM_HOME
PNPM_HOME=D:\local-cached\npm\pnpm
// 在 Path 中添加 bin 目录
%PNPM_HOME%\bin注意：
PNPM_HOME所指定的目录，就是 pnpm store、global 等目录所在的根目录
[5]Pnpm 修改镜像源
// 查看源
pnpm config get registry
// 切换淘宝源
pnpm config set registry "https://registry.npm.taobao.org/" // 老地址
// 或者
pnpm config set registry https://registry.npmmirror.com/ // 新地址
// 或者私库地址。下面为阿里云云效私库示例地址
pnpm config set registry "https://packages.aliyun.com/6652f3b6ced1b9e566e189fa/npm/npm-registry/"[6]Pnpm 配置目录
// pnpm全局仓库路径(类似 .git 仓库)
pnpm config set store-dir "D:\local-cached\npm\pnpm\store"
// pnpm全局缓存路径
pnpm config set cache-dir "D:\local-cached\npm\pnpm\cache"提示
Pnpm v11 即使配置了 PNPM_HOME 还是会在 D 盘创建默认的 store 目录，所以最好还是需要手动重新指定一下 store 目录。
[7] Pnpm v10 升级至 v11 注意事项
- 以后工程升级使用 Pnpm v11，可以使用下面命令自动检测和修改
cd /path/to/your/project
pnpx codemod run pnpm-v10-to-v11
# or
pnpm add --global codemod
codemod run pnpm-v10-to-v11- Pnpm v11 底层变化较大，建议按照前面修改了配置之后，重新检出代码工程，重新下载依赖和编译后后再行使用，具体命令如下：
// 重新下载依赖
pnpm install
// 升级主工程依赖
pnpm update --latest
// 升级各模块依赖
pnpm -r update --latest
// 重新编译模块
pnpm shared:build
