127 lines
3.0 KiB
Markdown
127 lines
3.0 KiB
Markdown
# 前端应用部署说明
|
||
|
||
## 问题解决
|
||
|
||
已修复的问题：
|
||
- ✅ 添加了聊天页面的底部导航栏
|
||
- ✅ 修复了底部导航栏遮挡输入框的问题
|
||
- ✅ 修复了静态资源路径问题（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. 清理浏览器缓存
|