# 部署检查清单 ## 🔧 修复完成的问题 ### ✅ 1. 聊天页面底部导航栏 - **问题**: 聊天页面缺少底部导航栏 - **修复**: 在 `src/views/Chat/index.vue` 中添加了 `` 组件 - **验证**: 访问 `/emotion-museum/chat` 应该能看到底部导航栏 ### ✅ 2. 底部导航栏遮挡输入框 - **问题**: 底部导航栏遮挡聊天输入框 - **修复**: 调整了CSS布局,输入框位于导航栏上方70px - **验证**: 聊天页面的输入框应该完全可见且可操作 ### ✅ 3. 静态资源404错误 - **问题**: 静态资源路径错误,返回404 - **修复**: - 在 `vite.config.ts` 中添加 `base: '/emotion-museum/'` - 在 `src/router/index.ts` 中设置 `createWebHistory('/emotion-museum/')` - **验证**: 所有CSS和JS文件应该正确加载 ### ✅ 4. 登录成功后跳转错误 - **问题**: 登录成功后跳转到根目录 `/` 而不是 `/emotion-museum/` - **修复**: 将 `window.location.href = redirect` 改为 `await router.push(redirect)` - **验证**: 登录成功后应该正确跳转到应用内页面 ## 📋 部署前检查 ### 1. 构建检查 ```bash # 确保构建成功 npm run build # 检查dist目录 ls -la dist/ ``` ### 2. 文件检查 - [ ] `dist/index.html` 中的资源路径包含 `/emotion-museum/assets/` - [ ] `dist/assets/` 目录存在且包含所有资源文件 - [ ] 测试文件 `test-*.html` 已生成 ### 3. 配置检查 - [ ] `vite.config.ts` 包含 `base: '/emotion-museum/'` - [ ] `src/router/index.ts` 包含 `createWebHistory('/emotion-museum/')` - [ ] NGINX配置正确设置 `/emotion-museum/` location ## 🚀 部署步骤 ### 方法一:使用部署脚本 ```bash # Windows .\deploy.ps1 # Linux/Mac ./deploy.sh ``` ### 方法二:手动部署 ```bash # 1. 上传index.html scp dist/index.html root@101.200.208.45:/data/www/emotion-museum/ # 2. 上传assets目录 scp -r dist/assets root@101.200.208.45:/data/www/emotion-museum/ # 3. 上传测试文件 scp dist/test-*.html root@101.200.208.45:/data/www/emotion-museum/ ``` ## ✅ 部署后验证 ### 1. 基础功能验证 - [ ] 访问 http://101.200.208.45/emotion-museum/ 正常加载 - [ ] 静态资源(CSS/JS)正常加载,无404错误 - [ ] 页面样式正常显示 ### 2. 路由验证 - [ ] 访问 http://101.200.208.45/emotion-museum/chat 正常 - [ ] 访问 http://101.200.208.45/emotion-museum/diary 正常 - [ ] 刷新页面不会出现404错误 ### 3. 登录流程验证 - [ ] 访问需要登录的页面会跳转到登录页 - [ ] 登录成功后正确跳转到目标页面(不是根目录) - [ ] 登录状态在页面刷新后保持 ### 4. 聊天页面验证 - [ ] 聊天页面显示底部导航栏 - [ ] 输入框不被导航栏遮挡 - [ ] 可以正常发送消息 - [ ] 底部导航栏可以正常点击跳转 ## 🐛 故障排除 ### 如果仍然出现404错误: 1. 检查服务器文件是否正确上传 2. 检查文件权限:`chmod -R 755 /data/www/emotion-museum/` 3. 重新加载NGINX配置:`nginx -s reload` 4. 清理浏览器缓存 ### 如果登录后仍跳转到根目录: 1. 确认前端代码已更新并重新构建 2. 检查浏览器开发者工具的Network标签 3. 确认新的JS文件已正确加载 ### 如果底部导航栏有问题: 1. 检查CSS文件是否正确加载 2. 确认BottomNavigation组件已正确引入 3. 检查z-index层级是否正确 ## 📞 联系信息 如果遇到问题,请提供: 1. 具体的错误信息 2. 浏览器开发者工具的截图 3. 访问的具体URL 4. 操作步骤