fix bugs

H5部署说明.md

@@ -0,0 +1,206 @@
+# H5 版本部署说明
+
+## 问题描述
+编译后的 H5 版本在服务器上显示样式丢失（乱码），但文字内容正常显示。
+
+## 原因分析
+1. **静态资源路径问题**：CSS 和 JS 文件路径不正确
+2. **服务器配置问题**：Nginx 或 Apache 配置不正确
+3. **MIME 类型问题**：CSS 文件被当作文本文件加载
+
+## 解决方案
+
+### 方案1：检查文件结构（推荐）
+
+编译后的文件结构应该是：
+```
+dist/build/h5/
+├── index.html
+└── static/
+    ├── index.css
+    └── js/
+        ├── chunk-vendors.xxx.js
+        └── index.xxx.js
+```
+
+**部署步骤：**
+1. 将整个 `dist/build/h5` 目录上传到服务器
+2. 确保目录结构完整，不要只上传 `index.html`
+3. 访问 `http://your-domain/index.html`
+
+### 方案2：Nginx 配置
+
+如果使用 Nginx，确保配置正确：
+
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+
+    # 根目录指向 h5 目录
+    root /path/to/dist/build/h5;
+    index index.html;
+
+    # 确保静态资源正确加载
+    location /static/ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # SPA 路由支持
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # 确保 CSS 文件 MIME 类型正确
+    location ~* \.css$ {
+        add_header Content-Type text/css;
+    }
+
+    # 确保 JS 文件 MIME 类型正确
+    location ~* \.js$ {
+        add_header Content-Type application/javascript;
+    }
+}
+```
+
+### 方案3：Apache 配置
+
+如果使用 Apache，在 `h5` 目录下创建 `.htaccess` 文件：
+
+```apache
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
+
+# 设置正确的 MIME 类型
+<IfModule mod_mime.c>
+  AddType text/css .css
+  AddType application/javascript .js
+</IfModule>
+
+# 启用 Gzip 压缩
+<IfModule mod_deflate.c>
+  AddOutputFilterByType DEFLATE text/html text/css application/javascript
+</IfModule>
+```
+
+### 方案4：修改 publicPath（如果部署在子目录）
+
+如果部署在子目录（如 `http://your-domain.com/martial/`），需要修改 `vue.config.js`：
+
+```javascript
+module.exports = {
+  // 修改为子目录路径
+  publicPath: process.env.NODE_ENV === 'production' ? '/martial/' : '/',
+
+  // 其他配置...
+}
+```
+
+然后重新编译：
+```bash
+npm run build:h5
+```
+
+### 方案5：检查浏览器控制台
+
+打开浏览器开发者工具（F12），查看：
+
+1. **Network 标签页**
+   - 检查 CSS 文件是否加载成功（状态码应该是 200）
+   - 检查文件路径是否正确
+   - 检查 Content-Type 是否为 `text/css`
+
+2. **Console 标签页**
+   - 查看是否有 404 错误
+   - 查看是否有 CORS 错误
+
+3. **常见错误信息：**
+   ```
+   Failed to load resource: net::ERR_FILE_NOT_FOUND
+   → 文件路径不正确，检查 publicPath 配置
+
+   Refused to apply style from '...' because its MIME type ('text/html') is not a supported stylesheet MIME type
+   → CSS 文件被当作 HTML 加载，检查服务器配置
+   ```
+
+## 快速诊断步骤
+
+1. **本地测试**
+   ```bash
+   # 在 dist/build/h5 目录下启动本地服务器
+   cd dist/build/h5
+   python -m http.server 8000
+   # 或使用 Node.js
+   npx http-server -p 8000
+   ```
+   访问 `http://localhost:8000`，如果本地正常，说明是服务器配置问题。
+
+2. **检查文件是否上传完整**
+   ```bash
+   # 在服务器上检查文件
+   ls -la /path/to/h5/static/
+   # 应该看到 index.css 和 js 目录
+   ```
+
+3. **检查文件权限**
+   ```bash
+   # 确保文件可读
+   chmod -R 755 /path/to/h5/
+   ```
+
+4. **检查 CSS 文件内容**
+   ```bash
+   # 查看 CSS 文件前几行
+   head -n 20 /path/to/h5/static/index.css
+   # 应该看到 CSS 代码，而不是 HTML 或错误信息
+   ```
+
+## 重新编译
+
+如果修改了配置，需要重新编译：
+
+```bash
+# 清理旧的编译文件
+rm -rf dist/build/h5
+
+# 重新编译
+npm run build:h5
+
+# 检查编译结果
+ls -la dist/build/h5/static/
+```
+
+## 常见问题
+
+### Q1: 样式完全丢失，只显示纯文本
+**A:** CSS 文件没有加载，检查：
+- 文件路径是否正确
+- 服务器配置是否正确
+- MIME 类型是否正确
+
+### Q2: 部分样式丢失
+**A:** CSS 文件加载了但不完整，检查：
+- CSS 文件是否完整上传
+- 是否有 CSS 压缩错误
+- 浏览器兼容性问题
+
+### Q3: 本地正常，服务器异常
+**A:** 服务器配置问题，检查：
+- publicPath 配置
+- Nginx/Apache 配置
+- 文件权限
+
+## 联系支持
+
+如果以上方案都无法解决问题，请提供：
+1. 浏览器控制台截图（Network 和 Console）
+2. 服务器配置文件
+3. 部署的完整路径
+4. 访问的 URL