martial/martial-admin-mini

Fork 0

Files

宅房 6f3b8db273 fix bugs

2025-12-17 09:23:27 +08:00

4.7 KiB

Raw Permalink Blame History

H5 版本部署说明

问题描述

编译后的 H5 版本在服务器上显示样式丢失（乱码），但文字内容正常显示。

原因分析

静态资源路径问题：CSS 和 JS 文件路径不正确
服务器配置问题：Nginx 或 Apache 配置不正确
MIME 类型问题：CSS 文件被当作文本文件加载

解决方案

方案1：检查文件结构（推荐）

编译后的文件结构应该是：

dist/build/h5/
├── index.html
└── static/
    ├── index.css
    └── js/
        ├── chunk-vendors.xxx.js
        └── index.xxx.js

部署步骤：

将整个 dist/build/h5 目录上传到服务器
确保目录结构完整，不要只上传 index.html
访问 http://your-domain/index.html

方案2：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 文件：

<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：

module.exports = {
  // 修改为子目录路径
  publicPath: process.env.NODE_ENV === 'production' ? '/martial/' : '/',

  // 其他配置...
}

然后重新编译：

npm run build:h5

方案5：检查浏览器控制台

打开浏览器开发者工具（F12），查看：

Network 标签页
- 检查 CSS 文件是否加载成功（状态码应该是 200）
- 检查文件路径是否正确
- 检查 Content-Type 是否为 text/css
Console 标签页
- 查看是否有 404 错误
- 查看是否有 CORS 错误

常见错误信息：

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 加载，检查服务器配置

快速诊断步骤

本地测试

# 在 dist/build/h5 目录下启动本地服务器
cd dist/build/h5
python -m http.server 8000
# 或使用 Node.js
npx http-server -p 8000

访问 http://localhost:8000，如果本地正常，说明是服务器配置问题。

检查文件是否上传完整

# 在服务器上检查文件
ls -la /path/to/h5/static/
# 应该看到 index.css 和 js 目录

检查文件权限

# 确保文件可读
chmod -R 755 /path/to/h5/

检查 CSS 文件内容

# 查看 CSS 文件前几行
head -n 20 /path/to/h5/static/index.css
# 应该看到 CSS 代码，而不是 HTML 或错误信息

重新编译

如果修改了配置，需要重新编译：

# 清理旧的编译文件
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 配置
文件权限

联系支持

如果以上方案都无法解决问题，请提供：

浏览器控制台截图（Network 和 Console）
服务器配置文件
部署的完整路径
访问的 URL

4.7 KiB Raw Permalink Blame History Unescape Escape