# 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