nxxmdata/government-admin/部署修复说明.md

# 政府管理后台部署修复说明

## 问题描述

部署后前端仍然使用 `http://localhost:5352` 访问API，导致无法正常访问后端服务。

## 问题原因

前端代码中硬编码了本地开发环境的API地址，没有根据部署环境动态配置。

## 解决方案

### 1. 环境变量配置

已创建环境配置文件：

**开发环境** (`.env.development`):
```env
VITE_API_BASE_URL=http://localhost:5352/api
VITE_APP_TITLE=政府管理系统
VITE_APP_ENV=development
```

**生产环境** (`.env.production`):
```env
VITE_API_BASE_URL=https://ad.ningmuyun.com/api/government
VITE_APP_TITLE=政府管理系统
VITE_APP_ENV=production
```

### 2. API配置文件修改

已修改以下文件使用环境变量：

- `src/utils/api.js` - 主要API配置
- `src/utils/productionMaterialCertificationApi.js` - 生产物料认证API
- `src/utils/deviceWarningApi.js` - 设备预警API
- `src/utils/cattleAcademyApi.js` - 牛只学院API
- `src/utils/epidemicActivityApi.js` - 疫情活动API
- `src/utils/approvalProcessApi.js` - 审批流程API

### 3. 部署步骤

#### 3.1 重新构建前端

```bash
cd government-admin

# 安装依赖
npm install

# 生产环境构建
npm run build
```

#### 3.2 部署到服务器

将构建后的 `dist` 目录上传到服务器的 `/var/www/html/government/` 目录。

#### 3.3 验证Nginx配置

确保服务器上的Nginx配置正确：

```nginx
# 政府端前端静态文件
location /government/ {
    alias /var/www/html/government/;
    try_files $uri $uri/ /government/index.html;
    index index.html;
}

# 政府端API代理
location ^~ /api/government/ {
    proxy_pass http://localhost:5352/api/government/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    # CORS配置
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
    
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}
```

#### 3.4 重启服务

```bash
# 重新加载Nginx配置
sudo nginx -t
sudo nginx -s reload

# 确保government-backend服务运行
pm2 restart government-backend
```

### 4. 验证修复

访问以下地址验证修复结果：

- 前端页面: `https://ad.ningmuyun.com/government/`
- API接口: `https://ad.ningmuyun.com/api/government/departments`

### 5. 注意事项

1. **环境变量**: 确保在生产环境构建时使用正确的环境变量
2. **缓存清理**: 部署后清理浏览器缓存
3. **HTTPS证书**: 确保SSL证书配置正确
4. **防火墙**: 确保端口443和80开放
5. **服务状态**: 确保government-backend服务正常运行

### 6. 故障排查

如果仍有问题，请检查：

1. **浏览器开发者工具**: 查看网络请求是否使用正确的URL
2. **Nginx日志**: 检查 `/var/log/nginx/error.log`
3. **后端日志**: 检查government-backend服务日志
4. **端口监听**: 确认5352端口正常监听

```bash
# 检查端口监听
netstat -tlnp | grep 5352

# 检查服务状态
pm2 status government-backend

# 测试API连通性
curl -k https://ad.ningmuyun.com/api/government/departments
```

---

## 附：历史路由刷新 404 修复

若在访问如 `https://ad.liaoniuyun.com/government/farmer` 并刷新后出现 404，这是前端使用 `history` 路由模式时，服务器未对深链接进行回退到 `index.html` 导致。请在 Nginx 中为 `/government/` 增加路由回退：

```nginx
# 优先匹配政府端前端路径，并做历史路由回退
location ^~ /government/ {
    # 推荐使用 root 方式，目录中应包含 government/index.html 与打包的 assets/
    root /var/www/html;
    index index.html;
    try_files $uri $uri/ /government/index.html;
}

# 若使用 alias，也请注意路径以 / 结尾，并保留回退
# location ^~ /government/ {
#     alias /var/www/html/government/;
#     index index.html;
#     try_files $uri $uri/ /government/index.html;
# }
```

验证步骤：
- 访问并刷新：`https://ad.liaoniuyun.com/government/farmer` 应正常显示页面，不再 404。
- 如仍异常，检查是否有其它 `location` 块（例如 `/` 或正则）优先生效覆盖了 `/government/` 的回退配置；可通过 `^~` 提升优先级。
- 确认 `vite.config.js` 已设置 `base: '/government/'`，且路由为 `createWebHistory('/government/')`（本项目已配置）。