Windows 前端開發(fā)環(huán)境一鍵啟動 （NVM + Yarn）

適用場景：公司內(nèi)所有前端項(xiàng)目統(tǒng)一 Node 版本管理 + 多項(xiàng)目快速啟動 + 完美解決亂碼問題
用途：可長期用于新員工入職培訓(xùn)、日常開發(fā)規(guī)范

---

目錄

1. 背景與痛點(diǎn)
2. 整體解決方案
3. 操作步驟
4. 常見問題排查
5. 附錄與參考鏈接
6. 附送可用腳本模版

---

1. 背景與痛點(diǎn)

• 前端項(xiàng)目依賴不同的 Node 版本；
• 啟動多個項(xiàng)目需要重復(fù)切換版本；
• Windows 批處理（.bat）文件中文亂碼；
• Vite 默認(rèn)端口沖突；
• 希望一鍵啟動所有項(xiàng)目，提升開發(fā)效率。

---

2. 整體解決方案

• 使用 NVM for Windows 統(tǒng)一管理 Node.js 多版本；
• 使用 Yarn 統(tǒng)一包管理；
• 編寫批處理啟動腳本實(shí)現(xiàn)一鍵啟動；
• 修改 Vite 配置避免端口沖突；
• 統(tǒng)一腳本編碼格式，徹底解決亂碼問題；
• 可選：使用 VBScript 實(shí)現(xiàn)后臺靜默啟動。

---

3. 操作步驟

3.1 安裝準(zhǔn)備

安裝 NVM (Node 版本管理器)

👉 下載地址：https://github.com/coreybutler/nvm-windows

安裝 Yarn

npm install -g yarn

安裝項(xiàng)目依賴

在每個項(xiàng)目目錄下執(zhí)行：

yarn install

---

3.2 單項(xiàng)目啟動腳本模版

以 zongbu_vue 項(xiàng)目為例：

start-zongbu.bat

@echo off
echo 正在啟動 zongbu_vue 項(xiàng)目...
F:
cd F:\zongbu_vue
nvm use 16
yarn dev
echo.
echo zongbu_vue 項(xiàng)目已啟動！
pause

🚩 其中 F: 和路徑請?zhí)鎿Q成你項(xiàng)目實(shí)際存儲位置

使用方法：

• 雙擊運(yùn)行 start-zongbu.bat 即可；
• 自動切換 Node 版本 → 自動 Yarn 啟動項(xiàng)目。

---

3.3 多項(xiàng)目統(tǒng)一啟動

每個項(xiàng)目分別創(chuàng)建獨(dú)立腳本（如 start-erp.bat、start-zongbu.bat）

創(chuàng)建統(tǒng)一總控腳本：start-all.bat

@echo off
echo 正在啟動所有項(xiàng)目...
start "" cmd /k "start-erp.bat"
start "" cmd /k "start-zongbu.bat"
echo.
echo 所有項(xiàng)目啟動腳本已運(yùn)行！
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}
}

🚩 每個項(xiàng)目配置不同端口，確保多個項(xiàng)目可并行調(diào)試。

---

3.5 中文亂碼解決方案

• 用記事本打開 .bat 文件；
• 另存為；
• 編碼選項(xiàng)選擇【ANSI（即 GBK）】；
• 保存。

驗(yàn)證效果：

正在啟動 zongbu_vue 項(xiàng)目...
zongbu_vue 項(xiàng)目已啟動！

---

3.6 高級技巧：后臺靜默啟動（可選）

創(chuàng)建 start-all.vbs

Set ws = CreateObject("WScript.Shell")
ws.Run "start-all.bat", 0

• 雙擊運(yùn)行 start-all.vbs 即可在后臺啟動，完全不彈出黑窗口。

---

4. 常見問題排查表

問題場景	解決方案
啟動只跑了一個項(xiàng)目	確保使用 start "" cmd /k 啟動多窗口
啟動亂碼	.bat 文件保存為 ANSI 編碼
端口被占用	修改 Vite 配置文件 server.port
node 版本錯誤	確認(rèn) nvm use 是否切換成功

---

5. 附錄與參考鏈接

• 🔗 NVM for Windows
• 🔗 Vite Server Options 文檔

---

6. 附送完整模版文件匯總

6.1 start-erp.bat

@echo off
echo 正在啟動 erp_pc_vue 項(xiàng)目...
F:
cd F:\erp_pc_vue
nvm use 16
yarn dev
echo.
echo erp_pc_vue 項(xiàng)目已啟動！
pause

6.2 start-zongbu.bat

@echo off
echo 正在啟動 zongbu_vue 項(xiàng)目...
F:
cd F:\zongbu_vue
nvm use 16
yarn dev
echo.
echo zongbu_vue 項(xiàng)目已啟動！
pause

6.3 start-all.bat

@echo off
echo 正在啟動所有項(xiàng)目...
start "" cmd /k "start-erp.bat"
start "" cmd /k "start-zongbu.bat"
echo.
echo 所有項(xiàng)目啟動腳本已運(yùn)行！
pause

6.4 start-all.vbs（可選后臺版）

Set ws = CreateObject("WScript.Shell")
ws.Run "start-all.bat", 0

---

🎯 最終效果圖

? 雙擊一鍵啟動所有項(xiàng)目
? 多窗口并行運(yùn)行
? 完美支持中文
? 自動管理 Node 版本
? 永久可維護(hù)、可拓展、可交付！

---

👉 本規(guī)范文檔可直接用于：

• 公司知識庫
• 新人入職手冊
• 項(xiàng)目開發(fā)流程文檔
• 團(tuán)隊(duì)標(biāo)準(zhǔn)化工具集