目錄

? 目標：在不聯網服務器中成功運行 vue-vben-admin

👉 你需要的最終環境：

? 場景：完全離線部署并運行開發/構建環境

🧱 步驟總覽：

🛠 詳細操作流程

? 第 1 步：聯網機器準備依賴

1. 克隆項目并進入目錄

?2. 安裝 pnpm 并安裝依賴

3. 導出依賴緩存

4. 復制以下內容到離線部署包

? 第 2 步：創建 setup.sh 安裝腳本

? 第 3 步：打包整個離線部署包并拷貝到服務器

? 第 4 步：在服務器上部署運行

? 推薦補充（構建后部署）

📦 補充建議

---

? 目標：在不聯網服務器中成功運行 vue-vben-admin

👉 你需要的最終環境：

組件	描述
Node.js	建議使用 Node.js v18 或 v20（你已有 v20.19.2）
pnpm	建議版本 v8.15.4（你將離線安裝）
vue-vben-admin	克隆或下載完整項目
離線依賴緩存	提前在聯網機器上通過 pnpm 拉取并導出
構建結果（可選）	如果只是部署前端靜態站點，可構建后拷貝即可

? 場景：完全離線部署并運行開發/構建環境

🧱 步驟總覽：

1. ? 在聯網機器準備完整環境和依賴緩存

2. ? 將項目源碼和依賴緩存打包

3. ? 在離線服務器中部署 Node.js、pnpm 和緩存

4. ? 運行 pnpm install（離線），再 pnpm dev 或 pnpm build

🛠 詳細操作流程

---

? 第 1 步：聯網機器準備依賴

1. 克隆項目并進入目錄

git clone https://gitee.com/annsion/vue-vben-admin.git
cd vue-vben-admin

?2. 安裝 pnpm 并安裝依賴

npm install -g pnpm@8.15.4
pnpm install

3. 導出依賴緩存

pnpm store export > pnpm-store.tar.gz

4. 復制以下內容到離線部署包

文件或目錄	用途
vue-vben-admin/	項目源碼
pnpm 可執行文件	在聯網機器中 which pnpm
pnpm-store.tar.gz	緩存依賴包
setup.sh	自動部署腳本（下一步生成）

---

? 第 2 步：創建 setup.sh 安裝腳本

創建 setup.sh（可放在 vue-vben-admin 根目錄外），內容如下：

#!/bin/bash
set -eecho "📦 解壓 pnpm store..."
mkdir -p /opt/pnpm-store
tar -xzf pnpm-store.tar.gz -C /opt/pnpm-storeecho "🔧 安裝 pnpm 可執行文件..."
mkdir -p /opt/pnpm
cp ./pnpm /opt/pnpm/pnpm
chmod +x /opt/pnpm/pnpmecho "🌐 設置環境變量..."
if ! grep -q "PNPM_HOME" ~/.bashrc; thenecho 'export PNPM_HOME=/opt/pnpm' >> ~/.bashrcecho 'export PATH="$PNPM_HOME:$PATH"' >> ~/.bashrcecho 'export PNPM_STORE_PATH=/opt/pnpm-store' >> ~/.bashrc
fi
source ~/.bashrcecho "? 環境配置完成，開始安裝依賴..."
cd vue-vben-admin
pnpm install --offlineecho "🎉 安裝完成！你可以運行以下命令："
echo "  pnpm dev      # 本地開發模式"
echo "  pnpm build    # 構建生產站點"

給腳本執行權限：

chmod +x setup.sh

---

? 第 3 步：打包整個離線部署包并拷貝到服務器

cd ..
tar -czf vue-vben-offline-package.tar.gz vue-vben-admin pnpm pnpm-store.tar.gz setup.sh

然后使用 scp、U盤、移動硬盤等方式拷貝到不聯網的服務器。

---

? 第 4 步：在服務器上部署運行

tar -xzf vue-vben-offline-package.tar.gz
cd vue-vben-admin
../setup.sh      # 執行部署腳本# 激活環境變量
source ~/.bashrc# 啟動服務
pnpm dev         # 開發環境
pnpm build       # 構建生產站點（輸出到 dist/）

---

? 推薦補充（構建后部署）

如果你只想部署靜態頁面：

pnpm build
# dist/ 目錄可以使用 nginx 托管：
sudo cp -r dist/ /var/www/html/
# 或者使用 node serve：
npm install -g serve
serve -s dist

---

📦 補充建議

• 🔁 每次升級依賴后，需重新執行 pnpm store export

• ? 建議在 .npmrc 或 .pnpmfile.cjs 中鎖定 registry 或包源版本

• 🌐 項目也有后端服務，請根據項目文檔分開部署