前端项目标准环境搭建与启动

糖炒栗子03262026-04-10 22:19

🚀 前端项目标准环境搭建与启动

采用 nvm -> node/npm -> pnpm 链路，适用于绝大多数现代前端项目。

一、环境管理工具 (nvm-windows)

使用 nvm 可以让你在不同项目间无缝切换 Node.js 版本。

安装 nvm ：从 GitHub 下载 nvm-setup.exe 并安装。

安装 Node.js ：

powershell 复制代码

nvm install 22.22.2  # 安装 LTS 稳定版

切换版本 （需管理员权限）：
powershell 复制代码
```
nvm use 22.22.2
```

二、包管理器配置 (pnpm)

pnpm 具有安装速度快、节省磁盘空间、防止幽灵依赖等优点，是目前中大型项目的首选。

全局安装 pnpm ：
powershell 复制代码
```
npm install -g pnpm
```
配置国内镜像源 （解决下载慢的问题）：
powershell 复制代码
```
pnpm config set registry https://registry.npmmirror.com
```

三、项目清理与初始化

在重新安装依赖前，建议清理旧的残留文件以防报错。

进入项目根目录 （必须包含 package.json 的文件夹）。
彻底删除旧文件 ：
- 手动删除 node_modules 文件夹。
- 手动删除 package-lock.json 或 yarn.lock。
执行安装 ：
powershell 复制代码
```
pnpm install
```

四、项目运行

安装完成后，通过 package.json 中定义的脚本启动项目。

开发环境运行 ：
powershell 复制代码
```
pnpm dev
```
构建打包 （部署到生产环境时用）：
powershell 复制代码
```
pnpm build
```

🛠️ 常见问题排查 (Checklist)

现象	原因	对策
找不到 package.json	命令行执行路径不对	`cd` 进入前端 UI 源码文件夹
nvm use 报错拒绝访问	权限不足	使用管理员身份打开 PowerShell/CMD
pnpm 命令无效	环境变量未同步	重启编辑器或运行 `pnpm setup`
安装依赖卡死/报错	网络问题或缓存冲突	检查镜像源配置，尝试删除 `node_modules` 重装

上一篇：CSS知识点记录

热门推荐

01GitHub 镜像站点 02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛 03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程 04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南 05MySQL表约束详解：8大核心约束实战指南 06Oh My Codex 快速使用指南 07CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南 08VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）09实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了 10UV安装并设置国内源