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

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

---

目錄

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

---

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

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

---

2. 整體解決方案

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

---

3. 操作步驟

3.1 安裝準(zhǔn)備

安裝 NVM (Node 版本管理器)

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

安裝 Yarn

npm install -g yarn

安裝項(xiàng)目依賴(lài)

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

yarn install

---

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

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

start-zongbu.bat

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

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

使用方法：

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

---

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

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

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

@echo off
echo 正在啟動(dòng)所有項(xiàng)目...
start "" cmd /k "start-erp.bat"
start "" cmd /k "start-zongbu.bat"
echo.
echo 所有項(xiàng)目啟動(dò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}
}

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

---

3.5 中文亂碼解決方案

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

驗(yàn)證效果：

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

---

3.6 高級(jí)技巧：后臺(tái)靜默啟動(dòng)（可選）

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

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

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

---

4. 常見(jiàn)問(wèn)題排查表

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

---

5. 附錄與參考鏈接

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

---

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

6.1 start-erp.bat

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

6.2 start-zongbu.bat

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

6.3 start-all.bat

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

6.4 start-all.vbs（可選后臺(tái)版）

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

---

🎯 最終效果圖

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

---

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

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