Windows 前端开发环境一键启动 （NVM + Yarn）
Windows 前端开发环境一键启动 （NVM + Yarn）
适用场景：公司内所有前端项目统一 Node 版本管理 + 多项目快速启动 + 完美解决乱码问题
用途：可长期用于新员工入职培训、日常开发规范
目录
- 背景与痛点
- 整体解决方案
- 操作步骤
- 常见问题排查
- 附录与参考链接
- 附送可用脚本模版
1. 背景与痛点
- 前端项目依赖不同的 Node 版本；
- 启动多个项目需要重复切换版本；
- Windows 批处理（.bat）文件中文乱码；
- Vite 默认端口冲突；
- 希望一键启动所有项目，提升开发效率。
2. 整体解决方案
- 使用 NVM for Windows 统一管理 Node.js 多版本；
- 使用 Yarn 统一包管理；
- 编写批处理启动脚本实现一键启动；
- 修改 Vite 配置避免端口冲突；
- 统一脚本编码格式，彻底解决乱码问题；
- 可选：使用 VBScript 实现后台静默启动。
3. 操作步骤
3.1 安装准备
安装 NVM (Node 版本管理器)
👉 下载地址：https://github.com/coreybutler/nvm-windows
安装 Yarn
npm install -g yarn
安装项目依赖
在每个项目目录下执行：
yarn install
3.2 单项目启动脚本模版
以 zongbu_vue 项目为例：
start-zongbu.bat
@echo off
echo 正在启动 zongbu_vue 项目...
F:
cd F:\zongbu_vue
nvm use 16
yarn dev
echo.
echo zongbu_vue 项目已启动！
pause
🚩 其中 F: 和路径请替换成你项目实际存储位置
使用方法：
- 双击运行
start-zongbu.bat即可； - 自动切换 Node 版本 → 自动 Yarn 启动项目。
3.3 多项目统一启动
每个项目分别创建独立脚本（如 start-erp.bat、start-zongbu.bat）
创建统一总控脚本：start-all.bat
@echo off
echo 正在启动所有项目...
start "" cmd /k "start-erp.bat"
start "" cmd /k "start-zongbu.bat"
echo.
echo 所有项目启动脚本已运行！
pause
3.4 修改 Vite 端口避免冲突
erp_pc_vue → vite.config.js
export default {server: {port: 3000}
}
zongbu_vue → vite.config.js
export default {server: {port: 3001}
}
🚩 每个项目配置不同端口，确保多个项目可并行调试。
3.5 中文乱码解决方案
- 用记事本打开 .bat 文件；
- 另存为；
- 编码选项选择【ANSI（即 GBK）】；
- 保存。
验证效果：
正在启动 zongbu_vue 项目...
zongbu_vue 项目已启动！
3.6 高级技巧：后台静默启动（可选）
创建 start-all.vbs
Set ws = CreateObject("WScript.Shell")
ws.Run "start-all.bat", 0
- 双击运行
start-all.vbs即可在后台启动，完全不弹出黑窗口。
4. 常见问题排查表
| 问题场景 | 解决方案 |
|---|---|
| 启动只跑了一个项目 | 确保使用 start "" cmd /k 启动多窗口 |
| 启动乱码 | .bat 文件保存为 ANSI 编码 |
| 端口被占用 | 修改 Vite 配置文件 server.port |
| node 版本错误 | 确认 nvm use 是否切换成功 |
5. 附录与参考链接
- 🔗 NVM for Windows
- 🔗 Vite Server Options 文档
6. 附送完整模版文件汇总
6.1 start-erp.bat
@echo off
echo 正在启动 erp_pc_vue 项目...
F:
cd F:\erp_pc_vue
nvm use 16
yarn dev
echo.
echo erp_pc_vue 项目已启动！
pause
6.2 start-zongbu.bat
@echo off
echo 正在启动 zongbu_vue 项目...
F:
cd F:\zongbu_vue
nvm use 16
yarn dev
echo.
echo zongbu_vue 项目已启动！
pause
6.3 start-all.bat
@echo off
echo 正在启动所有项目...
start "" cmd /k "start-erp.bat"
start "" cmd /k "start-zongbu.bat"
echo.
echo 所有项目启动脚本已运行！
pause
6.4 start-all.vbs（可选后台版）
Set ws = CreateObject("WScript.Shell")
ws.Run "start-all.bat", 0
🎯 最终效果图
✅ 双击一键启动所有项目
✅ 多窗口并行运行
✅ 完美支持中文
✅ 自动管理 Node 版本
✅ 永久可维护、可拓展、可交付！
👉 本规范文档可直接用于：
- 公司知识库
- 新人入职手册
- 项目开发流程文档
- 团队标准化工具集