happy-life-star/web/部署说明.md

前端应用部署说明

问题解决

已修复的问题：

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

配置修改

1. Vite配置 (vite.config.ts)

export default defineConfig({
  base: '/emotion-museum/',  // 添加了base路径
  // ... 其他配置
})

2. Vue Router配置 (src/router/index.ts)

const router = createRouter({
  history: createWebHistory('/emotion-museum/'),  // 添加了base路径
  // ... 其他配置
})

3. 登录跳转修复 (src/views/Login/index.vue)

// 修复前：使用window.location.href会跳转到根目录
window.location.href = redirect

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

部署步骤

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

Windows用户：

# 1. 构建项目
npm run build

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

Linux/Mac用户：

# 1. 构建项目
npm run build

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

方法二：手动部署

1. 构建项目

   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配置已经正确，无需修改：

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. 清理浏览器缓存