195 lines
4.6 KiB
Markdown
195 lines
4.6 KiB
Markdown
# 萌芽笔记 - 前端优化说明
|
||
|
||
## 📋 问题描述
|
||
|
||
原项目在部署到服务器后，某些浏览器（特别是移动端浏览器）会出现：
|
||
- localStorage 权限弹窗，点"允许"才能访问
|
||
- 某些浏览器不弹窗，直接阻止访问，导致页面一直加载
|
||
- 跨域或隐私模式下无法正常使用
|
||
|
||
## ✅ 解决方案
|
||
|
||
### 1. **完全移除对 localStorage 的强依赖**
|
||
- 实现了内存存储回退机制
|
||
- 即使 localStorage 被禁用也能正常运行
|
||
- 数据完全来自后端 API，不依赖浏览器存储
|
||
|
||
### 2. **优化的存储 Shim**
|
||
文件：`src/utils/storageShim.js`
|
||
- 静默检测 localStorage 可用性
|
||
- 自动降级到内存存储
|
||
- 不会触发浏览器权限弹窗
|
||
|
||
### 3. **错误边界组件**
|
||
文件：`src/components/ErrorBoundary.jsx`
|
||
- 捕获所有运行时错误
|
||
- 提供友好的错误提示
|
||
- 给出解决方案建议
|
||
|
||
### 4. **网络请求优化**
|
||
文件：`src/utils/fileUtils.js`
|
||
- 添加请求超时控制（15秒）
|
||
- 更详细的错误日志
|
||
- 友好的错误提示信息
|
||
|
||
### 5. **支持相对路径部署**
|
||
- 前后端同域名部署时，使用相对路径
|
||
- 避免跨域问题
|
||
- 更好的安全性
|
||
|
||
## 🚀 部署建议
|
||
|
||
### 推荐方式：前后端同域名部署
|
||
|
||
**配置步骤：**
|
||
|
||
1. **修改 `.env.production` 文件**
|
||
```bash
|
||
# 留空表示使用相对路径
|
||
VITE_API_BASE=
|
||
```
|
||
|
||
2. **构建前端**
|
||
```bash
|
||
cd mengyanote-frontend
|
||
npm install
|
||
npm run build
|
||
```
|
||
|
||
3. **配置 Nginx**
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com;
|
||
|
||
# 前端静态文件
|
||
location / {
|
||
root /path/to/mengyanote-frontend/dist;
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
# 后端 API 代理
|
||
location /api/ {
|
||
proxy_pass http://127.0.0.1:2424;
|
||
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;
|
||
}
|
||
}
|
||
```
|
||
|
||
4. **启动后端**
|
||
```bash
|
||
cd mengyanote-backend
|
||
python main.py
|
||
```
|
||
|
||
### 方式二：前后端分离部署
|
||
|
||
**配置步骤：**
|
||
|
||
1. **修改 `.env.production` 文件**
|
||
```bash
|
||
# 填写后端完整URL
|
||
VITE_API_BASE=https://api.your-domain.com
|
||
```
|
||
|
||
2. **配置后端 CORS**
|
||
|
||
编辑 `mengyanote-backend/main.py`，确保 CORS 配置正确：
|
||
```python
|
||
app.add_middleware(
|
||
CORSMiddleware,
|
||
allow_origins=["https://your-frontend-domain.com"],
|
||
allow_credentials=True,
|
||
allow_methods=["*"],
|
||
allow_headers=["*"],
|
||
)
|
||
```
|
||
|
||
3. **构建并部署前端**
|
||
```bash
|
||
npm run build
|
||
# 将 dist 目录上传到前端服务器
|
||
```
|
||
|
||
## 🔍 测试验证
|
||
|
||
部署后请在以下环境测试：
|
||
|
||
1. **桌面浏览器**
|
||
- ✅ Chrome
|
||
- ✅ Edge
|
||
- ✅ Firefox
|
||
- ✅ Safari
|
||
|
||
2. **移动浏览器**
|
||
- ✅ Chrome Mobile
|
||
- ✅ Safari iOS
|
||
- ✅ 微信内置浏览器
|
||
- ✅ 其他移动浏览器
|
||
|
||
3. **特殊模式**
|
||
- ✅ 隐私/无痕模式
|
||
- ✅ 禁用 Cookie
|
||
- ✅ 禁用 JavaScript Storage
|
||
|
||
## 📊 变更内容
|
||
|
||
### 修改的文件
|
||
|
||
1. ✏️ `src/utils/storageShim.js` - 优化存储回退机制
|
||
2. ✏️ `src/utils/fileUtils.js` - 优化网络请求和错误处理
|
||
3. ✏️ `src/context/AppContext.jsx` - 添加详细日志
|
||
4. ✏️ `src/main.jsx` - 添加错误边界
|
||
5. ✏️ `.env.production` - 改为相对路径模式
|
||
6. ➕ `src/components/ErrorBoundary.jsx` - 新增错误边界组件
|
||
|
||
### 关键改进
|
||
|
||
1. **零依赖 localStorage**
|
||
- 所有数据从后端获取
|
||
- localStorage 仅用于临时缓存（可选）
|
||
|
||
2. **完善的错误处理**
|
||
- 网络超时控制
|
||
- 友好的错误提示
|
||
- 详细的调试日志
|
||
|
||
3. **跨浏览器兼容**
|
||
- 支持所有主流浏览器
|
||
- 移动端完美适配
|
||
- 隐私模式正常工作
|
||
|
||
## 🐛 问题排查
|
||
|
||
如果仍然遇到问题，请检查：
|
||
|
||
### 1. 打开浏览器控制台 (F12)
|
||
查看是否有错误信息，所有日志都以 `[MengyaNote]` 开头
|
||
|
||
### 2. 检查网络请求
|
||
- 确认 `/api/tree` 和 `/api/file` 请求是否成功
|
||
- 查看响应状态码
|
||
|
||
### 3. 验证后端服务
|
||
```bash
|
||
curl http://your-domain.com/api/tree
|
||
```
|
||
|
||
### 4. 检查 CORS 配置
|
||
如果跨域部署，确保后端允许前端域名访问
|
||
|
||
## 📞 技术支持
|
||
|
||
如有问题，请提供：
|
||
1. 浏览器控制台的完整日志
|
||
2. 网络请求的详细信息
|
||
3. 浏览器版本和操作系统信息
|
||
|
||
---
|
||
|
||
**最后更新:** 2025-12-19
|
||
**版本:** 2.0 - 移除 localStorage 依赖版本
|