本文提供完整源码 + 部署脚本 + SQL 文件，新手可直接完整复现
前言
本系列将完整拆解一个 Vue3 企业级后台管理系统 从零搭建到上线的全过程。
本文是第一篇：
让任何人从零环境 clone 项目后，100% 跑通本地与线上环境
很多同学在 GitHub 找到不错的后台管理项目，clone 下来后却遇到：
- 依赖报错
- Node 版本不匹配
- 数据库缺失
- 部署上线失败
最终只能放弃运行。
因此本文从最真实的新手视角出发：
- 一台全新 Mac（未安装 Node / Git / MySQL）
- 一台空 Linux 服务器（未安装任何运行环境）
最终目标只有一个：
clone 项目 → 本地运行 → 一键部署上线，一次成功
一、项目技术栈与仓库
本项目采用企业级后台管理主流技术组合：
- 前端：Vue3 + Vite + Element Plus
- 后端：Node.js + Express
- 数据库：MySQL（本地开发 + 服务器生产）
- 部署：Nginx + PM2 + Linux
- 包管理：pnpm
GitHub 仓库：vite-admin-ele 🔗
线上示例地址： http://112.124.38.17 🔗
首页图片 👇
二 Mac 本地开发环境准备
本文默认国内网络环境。
macOS 下载 Node 安装包v24.13.0 (LTS) 🔗
# 安装完成后验证
node -v
npm -v
# 安装 pnpm 并配置国内镜像
npm install -g pnpm
pnpm -v
# 查看当前源
pnpm config get registry
# 切换国内镜像
pnpm config set registry https://registry.npmmirror.com
# 验证
git -v
# 验证
mysql --version
本地环境版本参考
> node -v
> v24.12.0
>
> pnpm -v
> 10.28.1
>
> mysql --version
> mysql Ver 8.4.7 for macos15 on arm64 (MySQL Community Server - GPL)
三 拉取项目并本地运行
克隆项目
git clone https://ghproxy.com/https://github.com/hangfengnice/vite-admin-ele.git
cd vite-admin-ele
安装依赖
# 确保node >= v24.12.0
git clone https://ghproxy.com/https://github.com/hangfengnice/vite-admin-ele.git
cd vite-admin-ele
启动前后端
pnpm run dev
浏览器访问前端地址，看到登录页面说明本地前端已跑通。
数据库初始化
首次点击登录会报错：
Unknown database 'test_db'
导入后端已存在的sql
mysql -u root -p < ./backend/sql/test_db_2026-01-25.sql
mysql -u root -p -e "SHOW DATABASES;"
看到 test_db 即成功。
此时再次登录即可进入首页，本地环境完成 🎉
四 服务器运行环境准备（空 Linux）
获取服务器公网 IP 后，重置 root 密码并登录：
ssh root@你的服务器IP
安装服务器mysql
apt update
apt install mysql-server -y
mysql --version
安装服务器ngnix
apt install -y nginx
systemctl enable nginx
systemctl start nginx
systemctl status nginx
安装 Node.js + pnpm + PM2
curl -fsSL https://deb.nodesource.com/setup_24.x | bash -
apt install -y nodejs
node -v
npm -v
npm install -g pnpm
pnpm setup
source ~/.bashrc
pnpm install -g pm2
pm2 -v
五 一键部署上线
项目根目录已提供一键部署脚本：
./deploy.sh
首次部署若未配置 SSH Key，会多次要求输入服务器密码。
推荐配置免密登录：
ssh-keygen -t ed25519
ssh-copy-id root@你的服务器IP
完成后部署全程无需再输入密码。
服务器 MySQL 权限修复
若出现：
Access denied for user 'root'@'localhost'
执行：
mysql -u root
USE mysql;
ALTER USER 'root'@'localhost'
IDENTIFIED WITH mysql_native_password BY 'RootTemp@123';
FLUSH PRIVILEGES;
EXIT;
导入服务器数据库
cd /var/www/node-api/sql
mysql -u root -p < ./test_db_2026-01-25.sql
mysql -u root -p -e "SHOW DATABASES;"
访问线上项目
http://你的服务器IP/auth/login
**当前跟做项目地址：**🔗
至此前端、后端、数据库全部部署完成 🎉
六 项目说明
当前项目已完成：
- 登录功能
- 基础 Layout 框架
- 前后端完整打通
- 一键部署脚本
布局模块参考了 vue-vben-admin 的架构设计，
现阶段以功能可用为主，后续将针对 可维护性与扩展性 逐步重构优化。
其他业务模块将持续迭代完善。
七、总结
本文完整实现了：
- Mac 零配置开发环境
- GitHub 项目本地跑通
- 空服务器自动部署上线
真正解决了：
“别人 clone 你的项目就能一次跑起来”
