🏪 PC商城部署指南

现在你的系统已经相当完整了——后端Java服务、PC管理端、移动App、微信小程序都已部署。但还有一个重要的环节：面向普通用户的PC商城（网站版H5）。

这个部署过程与管理端类似，但面向的是最终消费者，所以要特别关注用户体验和SEO。

🎯 理解PC商城的作用

PC商城是什么？

PC商城是用户通过浏览器访问的网页版商城。用户无需下载App，打开浏览器就能购物。

为什么需要PC商城？

✅ 覆盖更广 - 计算机用户仍然是重要客户
✅ 推广友好 - 网页易于分享和SEO
✅ 成本低 - 无需应用市场审核
✅ 更新快 - 修改即时生效，无需等待审核
✅ 数据分析 - 网页分析工具更丰富

PC商城vs H5的区别

特性	PC商城	H5
屏幕适配	优先桌面	优先手机
UI设计	宽屏设计	竖屏设计
交互方式	鼠标和键盘	触屏操作
功能完整性	完整	简化版
访问方式	网址	网址或公众号菜单
用户群体	中年、商务用户	年轻、手机用户

建议： PC商城和H5同时部署，覆盖所有用户。

🎯 第一步：准备PC商城项目

获取项目源代码

PC商城项目通常在项目根目录：

你的项目/
├── admin/           # PC管理端（已部署）
├── pc/              # PC商城（本步骤）
│   ├── src/
│   ├── pages/
│   ├── App.vue
│   ├── package.json
│   └── ...
├── mobile/          # H5商城 + App（已部署）
└── crmeb-admin/     # Java后端（已部署）

用HBuilderX或VS Code打开项目

方法1️⃣：用HBuilderX

bash

# HBuilderX菜单：文件 → 打开项目
# 选择 pc 文件夹

方法2️⃣：用VS Code

bash

cd /path/to/pc
code .

🎯 第二步：安装依赖和配置

打开终端

在项目根目录打开终端：

bash

cd /path/to/pc

安装npm依赖

bash

npm install

⏳ 等待 2-5 分钟

如果网络慢，换淘宝镜像：

bash

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

配置API地址

在项目中找到配置文件，通常在：

src/config/api.js
src/api/config.js
.env.production

修改API地址：

javascript

// src/config/api.js
export const API_URL = 'https://yoursite.com'  // 改成你的正式域名

要求：

✅ 必须是HTTPS
✅ 必须是有效的域名
✅ 确保后端服务已启动

配置其他参数

检查是否需要配置：

配置项	说明	示例
API_URL	后端地址	https://yoursite.com
WX_APPID	微信公众号ID	(可选)
UPLOAD_URL	文件上传地址	https://yoursite.com/upload
CDN_URL	CDN地址	https://cdn.yoursite.com (可选)

🎯 第三步：本地测试

启动开发服务器

在本地测试前，先确保一切正常：

bash

npm run serve

或者

bash

npm run dev

⏳ 等待编译，通常在 http://localhost:8080 可以访问

测试基本功能

访问 http://localhost:8080 并测试：

测试项	检查	状态
首页加载	首页能否正常显示	✓
页面响应	点击链接是否快速	✓
API请求	数据是否正常加载	✓
图片显示	商品图片是否显示	✓
列表分页	分页功能是否正常	✓
搜索功能	搜索是否有结果	✓
购物车	加入购物车是否成功	✓
支付流程	支付是否正常进行	✓
响应式设计	浏览器缩放是否适配	✓
浏览器兼容性	主流浏览器是否支持	✓

⚠️ 特别注意： 在PC上测试时，也要用不同分辨率和浏览器测试，确保适配所有用户的屏幕。

🎯 第四步：生产环境编译

编译为生产环境

确认本地测试无误后，编译为生产版本：

bash

npm run build

或者

bash

npm run build:prod

⏳ 等待编译，通常 2-5 分钟

✅ 成功标志： 看到 Build complete 或类似信息

输出文件

编译完成后，会生成一个 dist 文件夹：

dist/
├── index.html       # 主页面
├── js/              # 编译后的JavaScript
├── css/             # 样式文件
├── img/             # 图片资源
├── fonts/           # 字体文件
└── ...

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

🎯 第五步：上传到服务器

在宝塔创建网站

登录宝塔面板
点"网站" → "添加网站"
填写信息

字段	填写内容	示例
域名	PC商城的域名	www.yoursite.com 或 shop.yoursite.com
根目录	网站文件目录	/www/wwwroot/crmeb-shop
分类	选择分类	HTML/前端
PHP版本	可选	无需选择

点"提交"创建

上传dist文件夹内容

方法1️⃣：用宝塔文件管理器（简单）

在宝塔点"文件"
进入 /www/wwwroot/crmeb-shop/ 目录
点"上传"
选择dist文件夹内的所有文件
等待上传完成

⚠️ 关键： 上传的是dist文件夹内的内容，不是dist文件夹本身！

应该这样：

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

不是这样：

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

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

打开FileZilla或WinSCP
连接到服务器
进入 /www/wwwroot/crmeb-shop/
把dist文件夹内的所有文件拖拽到服务器
等待上传完成

方法3️⃣：用Git（最快）

bash

cd /www/wwwroot/crmeb-shop/
git clone 你的仓库地址 .
npm install
npm run build

🎯 第六步：配置Nginx

配置伪静态规则

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

在宝塔中配置：

找到你的网站
点"伪静态"标签
选择"Vue"或"React"
点"保存"

或手动配置：

点网站"配置文件"
在 location / {} 中添加：

nginx

location / {
    try_files $uri $uri/ /index.html;
    expires 30d;
    add_header Cache-Control "public, immutable";
}

# 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

点"保存"并重启Nginx

⚠️ 重要： try_files 这一行很关键！没有它，用户访问非首页URL时会404

配置HTTPS

点网站"SSL"标签
申请免费Let's Encrypt证书
配置完成

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

优化配置

为了提高性能，可以添加以下配置：

启用Gzip压缩：

nginx

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

添加安全头：

nginx

add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;

🎯 第七步：验证和测试

访问网站

在浏览器访问你的PC商城：

https://www.yoursite.com

首页测试

应该看到：

✅ 首页正常加载
✅ 商品列表显示
✅ 图片正常显示
✅ 没有404错误

功能测试

功能	测试方法	预期结果
首页导航	点击菜单	能打开对应页面
搜索功能	输入关键词搜索	显示搜索结果
商品列表	浏览不同分类	显示对应商品
商品详情	点击商品	打开详情页面
加入购物车	点加入按钮	购物车数量增加
登录/注册	点登录链接	打开登录页面
用户信息	登录后查看	显示个人信息
订单管理	查看订单	显示订单列表
支付测试	下单并支付	支付流程完整

检查浏览器控制台

打开浏览器F12，检查：

Console标签
- 有没有红色错误信息
- 有没有关键警告
Network标签
- API请求是否成功
- 资源加载是否完整
- 有没有404错误
Performance标签
- 首屏加载时间（应该<3秒）
- 网络瀑布图是否合理

⚠️ 如果有错误，检查：

API地址是否正确
后端服务是否运行
网络请求有没有被拦截

🎯 第八步：SEO优化

配置Meta信息

为了提高搜索引擎排名，需要配置：

在index.html中添加：

html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="我的商城 - 优质商品，快速配送">
    <meta name="keywords" content="商城, 购物, 商品">
    <meta name="author" content="Your Company">
    <title>我的商城 - 在线购物平台</title>
</head>

提交到搜索引擎

百度收录：

进入百度搜索资源平台
点"网站站点"
添加你的网站
提交网址

谷歌收录：

进入谷歌Search Console
添加网站
提交网址

优化技巧

优化方向	建议	效果
页面标题	包含关键词，不超过60字	提高点击率
描述信息	清晰简洁，包含关键词	提高吸引力
链接结构	逻辑清晰，层级不超过3级	提高爬虫效率
图片优化	压缩大小，添加alt说明	提高加载速度
内容质量	原创内容，定期更新	提高排名

🎯 第九步：监控和维护

监控网站性能

使用在线工具检测：

Google PageSpeed Insights - 速度评分
GTmetrix - 详细分析
WebPageTest - 深度测试

定期检查

检查项	频率	说明
死链接	每周	检查404错误
性能指标	每周	监控加载速度
日志错误	每天	查看error日志
服务器状态	每天	确保服务器运行
用户反馈	每天	收集用户问题

日志检查

在宝塔查看日志：

bash

# Nginx访问日志
tail -f /www/wwwroot/crmeb-shop/logs/access.log

# 错误日志
tail -f /www/wwwroot/crmeb-shop/logs/error.log

⚠️ 常见问题

Q: 为什么访问页面显示404？

A: 最常见的原因是伪静态配置不对

解决：

检查Nginx配置中是否有 try_files $uri $uri/ /index.html;
重启Nginx
清除浏览器缓存后再试

Q: 页面加载很慢怎么办？

A: 几个优化方向：

压缩静态资源
bash
```
npm run build --production
```
1
启用Gzip
- 在Nginx配置中启用gzip
使用CDN
- 静态文件上传到CDN
- 在配置中改为CDN地址
升级服务器
- 增加带宽或使用更好的主机

Q: 用户反馈页面样式乱了？

A: 可能是：

CSS文件没加载
- 检查dist文件夹中是否有css文件
- 查看浏览器Network标签
路径不对
- 检查 vue.config.js 中的 publicPath
- 应该设置为 /
缓存问题
- 清除浏览器缓存
- 检查Nginx缓存配置

Q: 支付功能不能用怎么办？

A: 排查步骤：

检查支付配置
- 微信支付AppID是否正确
- 支付宝APPID是否正确
检查后端配置
- Java项目中的支付密钥是否设置
- API地址是否正确
测试支付
- 用支付宝/微信的沙箱环境测试
- 不要用真实交易测试

Q: 怎样让用户找到我的PC商城？

A: 几个推广方法：

搜索引擎
- 提交到百度、谷歌
- 优化关键词和内容
社交媒体
- 在微信、微博、抖音分享链接
- 发布优惠活动
公众号菜单
- 在微信公众号菜单中添加链接
- 引导粉丝访问
邮件营销
- 给客户发送商城链接
- 推荐特价商品
线下推广
- 小程序二维码
- 商城网址

📋 PC商城部署检查清单

部署完成后，最后检查：

[ ] npm依赖已安装
[ ] API地址已修改为正式域名
[ ] 本地测试无误
[ ] 生产编译成功
[ ] dist文件夹已上传
[ ] 网站文件结构正确
[ ] Nginx伪静态已配置
[ ] HTTPS证书已申请
[ ] 首页正常打开
[ ] 所有功能正常工作
[ ] 没有控制台错误
[ ] 网络请求成功
[ ] 页面加载速度满足要求
[ ] 已提交搜索引擎
[ ] 性能指标达标

🎉 PC商城已经上线了！

现在你的系统已经非常完整：

✅ Java后端 - 提供API服务
✅ PC管理端 - 商家管理系统
✅ PC商城 - 用户购物网站
✅ H5商城 - 移动网页版
✅ App应用 - 原生移动应用
✅ 小程序 - 微信小程序

三方都有覆盖：

💻 PC用户
📱 移动用户
🎯 微信生态

后续工作：

定期更新内容和功能
监控用户数据
优化用户体验
推广和营销
收集反馈，不断改进

祝你的商城生意兴隆！🎉🚀

🏪 PC商城部署指南 ​

🎯 理解PC商城的作用 ​

PC商城是什么？ ​

为什么需要PC商城？ ​

PC商城vs H5的区别 ​

🎯 第一步：准备PC商城项目 ​

获取项目源代码 ​

用HBuilderX或VS Code打开项目 ​

🎯 第二步：安装依赖和配置 ​

打开终端 ​

安装npm依赖 ​

配置API地址 ​

配置其他参数 ​

🎯 第三步：本地测试 ​

启动开发服务器 ​

测试基本功能 ​

🎯 第四步：生产环境编译 ​

编译为生产环境 ​

输出文件 ​

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

在宝塔创建网站 ​

上传dist文件夹内容 ​

🎯 第六步：配置Nginx ​

配置伪静态规则 ​

配置HTTPS ​

优化配置 ​

🎯 第七步：验证和测试 ​

访问网站 ​

首页测试 ​

功能测试 ​

检查浏览器控制台 ​

🎯 第八步：SEO优化 ​

配置Meta信息 ​

提交到搜索引擎 ​

优化技巧 ​

🎯 第九步：监控和维护 ​

监控网站性能 ​

定期检查 ​

日志检查 ​

⚠️ 常见问题 ​

Q: 为什么访问页面显示404？ ​

Q: 页面加载很慢怎么办？ ​

Q: 用户反馈页面样式乱了？ ​

Q: 支付功能不能用怎么办？ ​

Q: 怎样让用户找到我的PC商城？ ​

📋 PC商城部署检查清单 ​

🎉 PC商城已经上线了！ ​

🏪 PC商城部署指南

🎯 理解PC商城的作用

PC商城是什么？

为什么需要PC商城？

PC商城vs H5的区别

🎯 第一步：准备PC商城项目

获取项目源代码

用HBuilderX或VS Code打开项目

🎯 第二步：安装依赖和配置

打开终端

安装npm依赖

配置API地址

配置其他参数

🎯 第三步：本地测试

启动开发服务器

测试基本功能

🎯 第四步：生产环境编译

编译为生产环境

输出文件

🎯 第五步：上传到服务器

在宝塔创建网站

上传dist文件夹内容

🎯 第六步：配置Nginx

配置伪静态规则

配置HTTPS

优化配置

🎯 第七步：验证和测试

访问网站

首页测试

功能测试

检查浏览器控制台

🎯 第八步：SEO优化

配置Meta信息

提交到搜索引擎

优化技巧

🎯 第九步：监控和维护

监控网站性能

定期检查

日志检查

⚠️ 常见问题

Q: 为什么访问页面显示404？

Q: 页面加载很慢怎么办？

Q: 用户反馈页面样式乱了？

Q: 支付功能不能用怎么办？

Q: 怎样让用户找到我的PC商城？

📋 PC商城部署检查清单

🎉 PC商城已经上线了！