当前位置: 首页 > news >正文

要在 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 拉取并导出
构建结果(可选)如果只是部署前端静态站点,可构建后拷贝即可

✅ 场景:完全离线部署并运行开发/构建环境

🧱 步骤总览:

  1. ✅ 在联网机器准备完整环境和依赖缓存

  2. ✅ 将项目源码和依赖缓存打包

  3. ✅ 在离线服务器中部署 Node.js、pnpm 和缓存

  4. ✅ 运行 pnpm install(离线),再 pnpm devpnpm 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 或包源版本

  • 🌐 项目也有后端服务,请根据项目文档分开部署

http://www.dtcms.com/a/253333.html

相关文章:

  • LLM 支持的基于意图的分类 网络钓鱼电子邮件
  • 设计模式精讲 Day 6:适配器模式(Adapter Pattern)
  • 华为云Flexus+DeepSeek征文 | 基于DeepSeek-R1强化学习的多模态AI Agent企业级应用开发实战:从理论到生产的完整解决方案
  • 在MATLAB中绘制阵列天线的散射方向图
  • ChangeNotifierProvider 本质上也是 Widget
  • 我的256天创作纪念日
  • 二、OpenCV的第一个程序
  • Arduino入门教程:9、蜂鸣器
  • CppCon 2017 学习:CNL: A Compositional Numeric Library
  • Vue3 × DataV:三步上手炫酷数据可视化组件库
  • 机器学习 (ML) 基础入门指南
  • 李宏毅2025《机器学习》第一讲-生成式AI:技术突破和未来发展
  • 伪造GPS信号多种方式尝试-HackRF
  • 《MyBatis-Day02》
  • 将项目推到Github
  • 吉林大学软件工程章节测试答案-第八章
  • 《挑战你的控制力!开源项目小游戏学习“保持平衡”开发解析:用HTML+JS+CSS实现物理平衡挑战》​
  • 一篇文章快速学会CSS
  • Linux之线程概念与控制
  • 企业宣传PPT模版分享
  • 解决: React Native android webview 空白页
  • Docker基础理论与阿里云Linux服务器安装指南
  • 双因子认证如何让Windows系统登录更安全?SLA操作系统双因素认证解决方案深度解析
  • 裸金属服务器深度评测:云计算时代的性能与安全担当​​​​
  • 01、python实现matlab的插值算法,以及验证
  • 云原生安全
  • 操作系统期末复习--操作系统初识以及进程与线程
  • ios如何把H5网页变成主屏幕webapp应用
  • 算法导论第十四章 B树与B+树:海量数据的守护者
  • 日语学习-日语知识点小记-构建基础-JLPT-N4阶段(36):复习