# 政府管理后台部署修复说明 ## 问题描述 部署后前端仍然使用 `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/')`(本项目已配置)。