大粽子

Appearance

🖥️ PC管理端打包和部署指南 ​

Java 后端已经上线了。现在需要部署 PC 管理端。管理员就是通过这个界面来管理整个商城系统的。

PC 管理端是一个 Vue 项目，需要编译成静态文件后部署。

🎯 理解 PC 管理端是什么 ​

PC 管理端（也叫后台管理系统）是给商家和管理员用的工具：

功能：

  • 📦 管理商品
  • 👥 管理用户
  • 💰 查看订单和销售额
  • 🎁 设置优惠券和营销
  • 📊 查看数据报表
  • ⚙️ 系统配置

技术：

  • Vue.js 框架（前端框架）
  • Element UI（UI 组件库）
  • 需要编译成 HTML + CSS + JS 文件
  • 通过 Nginx 提供静态文件

🎯 第一步：准备开发环境 ​

在本地电脑上编译管理端项目。

检查是否安装了 Node.js ​

打开命令行，运行：

bash
node -v
npm -v

应该看到版本号，比如：

Node 版本： v18.0.0

npm 版本： 9.0.0

💡 小贴士： Node 16+ 和 npm 8+ 就可以使用

如果看不到，需要先装 Node.js。

💡 小贴士： 前面"06_服务器运行环境"里提过如何装 Node.js。

进入项目目录 ​

bash
cd 你的管理端项目路径

比如：

bash
cd /path/to/crmeb-admin

🎯 第二步：安装依赖 ​

项目需要各种 npm 包才能编译。

安装依赖 ​

bash
npm install

⏳ 等待 2-10 分钟（取决于网络速度）

💡 小贴士： 如果速度慢，可以换淘宝镜像：

bash
npm config set registry https://registry.npmmirror.com

出错了怎么办？ ​

如果看到报错，常见原因：

  1. 网络问题 - 换个网络试试
  2. Node 版本太旧 - 升级 Node.js
  3. 依赖冲突 - 清空 node_modules 重新装：
    bash
    rm -rf node_modules
npm install

✅ 看到 added xxx packages 说明成功了。

🎯 第三步：配置 API 地址 ​

这一步很关键！管理端需要知道后端 API 在哪里。

找到配置文件 ​

通常在这些位置：

  • .env 或 .env.local
  • .env.production
  • src/config/...
  • vue.config.js

修改 API 地址 ​

找到这样的配置：

javascript
// .env 或 .env.production
VUE_APP_API_URL=http://localhost:8000

改成你服务器的地址：

javascript
VUE_APP_API_URL=http://yoursite.com

或者用 IP 地址：

javascript
VUE_APP_API_URL=http://123.45.67.89:8000

⚠️ 重点：

  • 如果是 HTTPS（https://），要改成 https://
  • 如果管理端和后端在同一个域名，可以用相对路径：/

💡 小贴士： 如果不确定，先用 IP 地址测试，确认能用再改域名。

🎯 第四步：本地编译 ​

现在开始编译成静态文件。

开发模式（测试用） ​

如果想在本地先测试一下：

bash
npm run serve

这会启动一个本地开发服务器，通常在 http://localhost:8080

💡 小贴士： 开发模式可以实时看到代码改动的效果。

生产编译 ​

当测试没问题后，编译成生产环境的文件：

bash
npm run build

这会：

  1. 优化代码
  2. 压缩文件
  3. 生成静态文件

⏳ 等待 1-3 分钟

✅ 看到 Build complete 说明成功了！

输出文件 ​

编译完成后，会生成一个 dist 文件夹，里面包含：

  • index.html - 主页面
  • js/ - 编译后的 JavaScript 文件
  • css/ - 样式文件
  • img/ - 图片资源

这个 dist 文件夹就是你要上传到服务器的！

🎯 第五步：上传到服务器 ​

现在把编译好的 dist 文件夹上传到服务器。

在宝塔创建管理端网站 ​

  1. 登录宝塔

  2. 点"网站" → "添加网站"

  3. 填写：

    • 域名：admin.yoursite.com 或 IP 地址
    • 根目录：/www/wwwroot/crmeb-admin
    • 分类：选择一个分类即可

  4. 点"提交"创建网站

上传 dist 文件夹 ​

方法1️⃣：用宝塔文件管理器

  1. 在宝塔点"文件"
  2. 进入 /www/wwwroot/crmeb-admin/ 目录
  3. 点"上传"
  4. 选择整个 dist 文件夹
  5. 等待上传

方法2️⃣：用 SFTP 工具（推荐）

  1. 打开 FileZilla 或 WinSCP
  2. 连接到服务器
  3. 进入 /www/wwwroot/crmeb-admin/
  4. 把本地的 dist 文件夹拖进去
  5. 等待上传完成

⚠️ 注意： 上传的是 dist 文件夹里的内容，不是 dist 文件夹本身！

应该这样：

/www/wwwroot/crmeb-admin/
  ├── index.html
  ├── js/
  ├── css/
  ├── img/
  └── ...

不是这样：

/www/wwwroot/crmeb-admin/
  └── dist/
      ├── index.html
      └── ...

🎯 第六步：配置 Nginx ​

上传完后，还需要配置 Nginx，让管理端能正常工作。

配置伪静态规则 ​

Vue 单页应用需要特殊的伪静态配置。

在宝塔：

  1. 找到管理端网站
  2. 点"伪静态"标签
  3. 选择"Vue"或"React"
  4. 点"保存"

或者手动添加 Nginx 规则：

在"配置文件"中添加：

nginx
location / {
    try_files $uri $uri/ /index.html;
}

这样当用户访问任何路由时，都会回到 index.html，由 Vue 来处理路由。

配置 HTTPS（推荐） ​

  1. 在网站设置点"SSL"标签
  2. 申请免费证书
  3. 配置完成

✅ 现在 https://admin.yoursite.com 可以访问了。

🎯 第七步：验证管理端 ​

在浏览器访问管理端：

https://admin.yoursite.com

应该看到管理端的登录页面。

测试功能 ​

  1. 用初始账号登录

    • 默认账号：admin
    • 默认密码：admin123（通常，根据你的系统而定）

  2. 验证功能是否正常

    • 能否看到商品列表
    • 能否加载数据
    • API 请求有没有错误

⚠️ 如果白屏或报错：

  1. 打开浏览器开发者工具（F12）
  2. 点"Console"标签
  3. 看有没有错误信息

常见错误：

  • 跨域错误 - 后端需要配置 CORS
  • API 404 - 后端路由不对
  • 连接拒绝 - 后端没启动或端口不对
  • 白屏 - index.html 有问题

⚠️ 常见问题速查 ​

Q: 管理端加载很慢？ ​

A: 可能是：

  1. 静态文件没有压缩

    • 在 vue.config.js 中启用 gzip
    • 或者在 Nginx 配置启用 gzip

  2. 网络慢

    • 检查你的带宽

  3. 服务器性能不足

    • 升级服务器配置

Q: 登录不了怎么办？ ​

A: 检查：

  1. API 地址对不对？

    • 打开浏览器 F12
    • 看登录请求发到了哪里
    • 确保和后端地址一致

  2. 后端运行着吗？

    bash
    ps aux | grep java

  3. 数据库有用户吗？

    • 在数据库检查 admin 用户

Q: 上传管理端后，其他页面显示 404？ ​

A: 这是因为 Nginx 配置不对。

解决：

  1. 确保伪静态规则已配置
  2. 检查 Nginx 配置文件有没有 try_files 规则
  3. 重启 Nginx

Q: 样式显示不正确或图片不显示？ ​

A: 可能是：

  1. 路径不对 - dist 文件夹内容没上传对
  2. 相对路径问题 - 检查 vue.config.js 中的 publicPath

通常改成：

javascript
module.exports = {
  publicPath: '/',
  // ...
}

Q: 能同时部署多个管理端吗？ ​

A: 可以，用不同域名或端口：

  • admin.yoursite.com → /www/wwwroot/crmeb-admin
  • admin2.yoursite.com → /www/wwwroot/crmeb-admin2

或者用子路径：

nginx
location /admin {
    alias /www/wwwroot/crmeb-admin;
    try_files $uri $uri/ /admin/index.html;
}

📋 管理端部署检查清单 ​

部署完成后，检查这些项目：

  • [ ] Node.js 已安装
  • [ ] npm 依赖已安装
  • [ ] API 地址已正确配置
  • [ ] 本地编译成功（npm run build）
  • [ ] dist 文件夹已上传到服务器
  • [ ] Nginx 伪静态规则已配置
  • [ ] HTTPS 证书已申请
  • [ ] 能通过域名访问管理端
  • [ ] 能正常登录
  • [ ] API 请求正常工作

🎉 PC 管理端已经上线！ ​

现在：

  1. ✅ Java 后端运行
  2. ✅ PC 管理端可以访问
  3. ✅ 管理员可以登录管理

接下来：

  1. 部署 H5 商城（参考H5打包）
  2. 初始化商品和分类
  3. 配置营销功能
  4. 邀请商家或用户

祝你的系统顺利上线！🚀

大粽子