207 lines
4.7 KiB
Markdown
207 lines
4.7 KiB
Markdown
# 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
|