要在 Linux 不联网服务器 上部署并运行 Gitee 上的 vue-vben-admin 项目,并且该项目使用的是 pnpm 管理依赖
目录
✅ 目标:在不联网服务器中成功运行 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 拉取并导出 |
构建结果(可选) | 如果只是部署前端静态站点,可构建后拷贝即可 |
✅ 场景:完全离线部署并运行开发/构建环境
🧱 步骤总览:
-
✅ 在联网机器准备完整环境和依赖缓存
-
✅ 将项目源码和依赖缓存打包
-
✅ 在离线服务器中部署 Node.js、pnpm 和缓存
-
✅ 运行
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 或包源版本 -
🌐 项目也有后端服务,请根据项目文档分开部署