# 前端应用部署说明

## 问题解决

已修复的问题：
- ✅ 添加了聊天页面的底部导航栏
- ✅ 修复了底部导航栏遮挡输入框的问题
- ✅ 修复了静态资源路径问题（404错误）
- ✅ 修复了登录成功后跳转到根目录的问题

## 配置修改

### 1. Vite配置 (vite.config.ts)
```typescript
export default defineConfig({
  base: '/emotion-museum/',  // 添加了base路径
  // ... 其他配置
})
```

### 2. Vue Router配置 (src/router/index.ts)
```typescript
const router = createRouter({
  history: createWebHistory('/emotion-museum/'),  // 添加了base路径
  // ... 其他配置
})
```

### 3. 登录跳转修复 (src/views/Login/index.vue)
```typescript
// 修复前：使用window.location.href会跳转到根目录
window.location.href = redirect

// 修复后：使用Vue Router确保正确的base路径
await router.push(redirect)
```

## 部署步骤

### 方法一：使用部署脚本（推荐）

#### Windows用户：
```powershell
# 1. 构建项目
npm run build

# 2. 运行部署脚本
.\deploy.ps1
```

#### Linux/Mac用户：
```bash
# 1. 构建项目
npm run build

# 2. 运行部署脚本
./deploy.sh
```

### 方法二：手动部署

1. **构建项目**
   ```bash
   npm run build
   ```

2. **上传文件到服务器**
   将 `dist/` 目录下的所有文件上传到服务器的 `/data/www/emotion-museum/` 目录

3. **验证部署**
   访问：http://101.200.208.45/emotion-museum/

## 文件结构

部署后的服务器目录结构：
```
/data/www/emotion-museum/
├── index.html
├── assets/
│   ├── index-S5x8WESs.js
│   ├── vendor-BVOd_zCB.js
│   ├── elementPlus-BChrtn-B.js
│   ├── index-Cb6OR0c2.css
│   └── ... (其他资源文件)
├── test-api.html
├── test-final-ws.html
├── test-message-api.html
├── test-native-ws.html
└── test-simple-ws.html
```

## NGINX配置

当前的NGINX配置已经正确，无需修改：
```nginx
location /emotion-museum/ {
    try_files $uri $uri/ /emotion-museum/index.html;
    
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}
```

## 验证部署

部署完成后，访问以下地址验证：
- 主页：http://101.200.208.45/emotion-museum/
- 聊天页面：http://101.200.208.45/emotion-museum/chat
- 日记页面：http://101.200.208.45/emotion-museum/diary

## 注意事项

1. **静态资源路径**：现在所有静态资源都会正确引用 `/emotion-museum/assets/` 路径
2. **路由配置**：Vue Router已配置为使用 `/emotion-museum/` 作为base路径
3. **底部导航栏**：聊天页面现在包含底部导航栏，且不会遮挡输入框
4. **缓存清理**：如果遇到缓存问题，可以清理浏览器缓存或使用强制刷新（Ctrl+F5）

## 故障排除

如果仍然遇到404错误：
1. 检查服务器上的文件是否正确上传
2. 检查文件权限是否正确
3. 检查NGINX配置是否重新加载
4. 清理浏览器缓存