大粽子

Appearance

📱 H5商城打包和部署指南 ​

后端和管理端都上线了，现在轮到 H5 商城了。这是用户用手机访问和购物的地方！

H5 商城是用 UniApp 开发的，可以同时编译成网页版和小程序版。

🎯 理解 H5 商城是什么 ​

H5 商城是给用户用的购物平台：

功能：

  • 🛍️ 浏览商品
  • 🛒 购物车
  • 💳 下单支付
  • 👤 用户账户
  • 📦 订单管理
  • ⭐ 商品评价

技术：

  • UniApp 框架（跨平台开发框架）
  • Vue.js（前端框架）
  • 可以编译成 H5 网页版、小程序版、App 等

🎯 第一步：准备项目 ​

确认项目结构 ​

进入 H5 商城项目目录：

bash
cd 你的H5商城项目路径

确认文件存在：

  • package.json - 项目配置文件
  • src/ - 源代码目录
  • public/ 或 static/ - 静态资源

检查配置文件 ​

找到 API 配置，通常在：

  • .env 或 .env.local
  • src/config/...
  • src/api/...

找到类似的配置：

javascript
// src/config/api.js 或 .env
VITE_API_URL=http://localhost:8000

修改 API 地址 ​

改成你服务器的地址：

javascript
VITE_API_URL=http://yoursite.com

⚠️ 重点： 确保和后端地址一致！

🎯 第二步：安装依赖 ​

bash
npm install

⏳ 等待 2-10 分钟

如果速度慢，换淘宝镜像：

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

🎯 第三步：编译成 H5 网页版 ​

本地测试（可选） ​

在本地先测试：

bash
npm run dev:h5

这会启动开发服务器，通常在 http://localhost:5173 或 http://localhost:3000

打开浏览器访问，验证功能正常。

⏸️ 按 Ctrl+C 停止服务。

编译生产版本 ​

bash
npm run build:h5

这会编译成生产环境的文件。

⏳ 等待 1-3 分钟

✅ 看到 Build complete 说明成功！

输出文件 ​

编译完成后，会生成：

  • dist/h5/ 或 dist/ 目录
  • 包含 index.html 和其他静态文件

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

在宝塔创建 H5 商城网站 ​

  1. 登录宝塔

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

  3. 填写：

    • 域名：shop.yoursite.com 或 h5.yoursite.com（可以用 IP 先测试）
    • 根目录：/www/wwwroot/crmeb-h5
    • 分类：选任意分类

  4. 点"提交"

上传编译文件 ​

用 SFTP 工具或宝塔文件管理器：

  1. 上传 dist 文件夹内的所有文件到 /www/wwwroot/crmeb-h5/
  2. 确保 index.html 直接在这个目录下

正确的结构：

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

🎯 第五步：配置 Nginx ​

H5 是 Vue 单页应用，需要特殊配置。

配置伪静态 ​

在宝塔找到 H5 商城网站：

  1. 点"伪静态"标签
  2. 选择"Vue"
  3. 点"保存"

或者在"配置文件"中添加：

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

配置 HTTPS（推荐） ​

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

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

🎯 第六步：验证 H5 商城 ​

在浏览器访问：

https://shop.yoursite.com

应该看到 H5 商城首页。

测试功能 ​

  1. 能否加载商品列表
  2. 能否搜索商品
  3. 能否加入购物车
  4. 能否下单（需要配置支付）

⚠️ 如果出现问题：

  • 打开 F12 开发者工具
  • 查看 Console 有没有错误
  • 检查 Network 中 API 请求是否成功

🎯 第七步（可选）：编译小程序版本 ​

如果还想支持微信小程序，可以继续编译小程序版本。

⚠️ 注意： 这部分比较复杂，需要微信开发者账号。

编译小程序 ​

bash
npm run build:mp-weixin

申请开发者账号 ​

  1. 打开 微信公众平台
  2. 申请小程序账号（需要个人或公司认证）
  3. 获取 App ID
  4. 创建版本

上传到微信开发者工具 ​

  1. 下载 微信开发者工具
  2. 用开发者工具打开编译生成的 dist/mp-weixin/ 文件夹
  3. 预览或上传审核

💡 小贴士： 小程序部分会比较复杂，建议先把 H5 商城上线，有时间再做小程序。

⚠️ 常见问题速查 ​

Q: H5 商城加载很慢？ ​

A: 优化方案：

  1. 启用 Gzip 压缩

    • 在 Nginx 配置启用 gzip
    • 能减少 50-70% 的文件大小

  2. 使用 CDN

    • 把静态文件上传到 CDN（阿里云、腾讯云等）
    • 用户从最近的 CDN 节点下载

  3. 优化代码

    • 删除不用的依赖
    • 使用代码分割

Q: H5 和管理端用同一个域名可以吗？ ​

A: 可以，用不同的子路径：

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

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

location / {
    proxy_pass http://127.0.0.1:8000;
}

这样：

  • www.yoursite.com/admin → 管理端
  • www.yoursite.com/shop → H5 商城
  • www.yoursite.com → 后端 API

Q: 支付不成功怎么办？ ​

A: H5 支付需要额外配置：

  1. 微信支付

    • 企业认证和开户
    • 配置商户号和密钥
    • 在项目中配置支付参数

  2. 支付宝支付

    • 申请支付宝商家账号
    • 生成密钥对
    • 在项目中配置

这部分比较复杂，需要专门的"支付配置"指南。

Q: 用户反馈商品图片显示不了？ ​

A: 可能是：

  1. 图片路径不对

    • 检查后端返回的图片 URL
    • 确保是完整 URL，不是相对路径

  2. 图片服务器问题

    • 检查图片是否已上传
    • 看防火墙有没有拦住

  3. CORS 跨域问题

    • 如果图片在另一个域名，需要配置 CORS

Q: 怎样才能让 H5 商城在微信里分享？ ​

A: 需要配置微信分享：

  1. 申请微信公众号
  2. 配置 JS 接口权限
  3. 在项目中配置微信 SDK
  4. 处理分享链接

这也需要专门的指南，比较复杂。

💡 优化建议 ​

开启 Gzip 压缩 ​

在 Nginx 配置中添加：

nginx
gzip on;
gzip_vary on;
gzip_min_length 1000;
gzip_types text/plain text/css application/json application/javascript;

这能大幅减小文件大小，加快加载速度。

配置缓存 ​

静态文件可以告诉浏览器缓存：

nginx
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

这样用户下次访问时，浏览器会使用缓存，不需要重新下载。

定期更新依赖 ​

bash
npm outdated
npm update

及时更新依赖可以获得最新的性能优化和安全补丁。

📋 H5 商城部署检查清单 ​

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

  • [ ] Node.js 已安装
  • [ ] npm 依赖已安装
  • [ ] API 地址已正确配置
  • [ ] 本地编译成功（npm run build:h5）
  • [ ] H5 文件已上传到服务器
  • [ ] Nginx 伪静态规则已配置
  • [ ] HTTPS 证书已申请
  • [ ] 能通过域名访问 H5 商城
  • [ ] 商品列表能正常加载
  • [ ] 能搜索和浏览商品
  • [ ] 购物车功能正常
  • [ ] Gzip 压缩已启用

🎉 你的完整系统已经上线！ ​

现在你拥有：

  1. ✅ Java 后端 API
  2. ✅ PC 管理端（商家管理）
  3. ✅ H5 商城（用户购物）

整个系统已经可以运营了！

接下来的步骤： ​

  1. 初始化数据

    • 添加商品分类
    • 上传商品
    • 配置营销活动

  2. 配置支付

    • 微信支付
    • 支付宝支付

  3. 邀请商家和用户

    • 添加商家账号
    • 做营销推广

  4. 监控和优化

    • 定期检查服务器状态
    • 优化慢查询
    • 升级过期依赖

  5. 维护和备份

    • 定期备份数据库
    • 监控日志查找问题
    • 及时修复 bug

🚀 恭喜你！ ​

你已经成功：

  • 部署了完整的多商户商城系统
  • 配置了域名和 HTTPS
  • 启动了后端、管理端和 H5 商城

这是一项了不起的成就！🎉

如果遇到问题，建议：

  1. 查看各组件的日志（Nginx、Java、MySQL）
  2. 检查防火墙和安全组配置
  3. 在官方文档或社区寻求帮助

祝你的商城系统顺利运营！💰

大粽子