161 lines
3.3 KiB
Markdown
161 lines
3.3 KiB
Markdown
# Flutter Web 部署指南
|
||
|
||
## 问题：WebAssembly 加载错误
|
||
|
||
错误信息：
|
||
```
|
||
TypeError: Failed to execute 'compile' on 'WebAssembly':
|
||
An argument must be provided, which must be a Response or Promise<Response> object
|
||
```
|
||
|
||
## 原因分析
|
||
|
||
1. **文件不完整** - canvaskit.wasm 或其他 WASM 文件未正确部署
|
||
2. **MIME 类型错误** - 服务器未正确返回 `.wasm` 文件的 MIME 类型
|
||
3. **缓存问题** - 浏览器缓存了旧版本的文件
|
||
|
||
## 部署步骤
|
||
|
||
### 方式1: 使用部署脚本（推荐）
|
||
|
||
```bash
|
||
# 1. SSH 登录服务器
|
||
ssh root@8.155.172.147
|
||
|
||
# 2. 进入项目目录
|
||
cd /www/wwwroot/monisuo
|
||
|
||
# 3. 拉取最新代码
|
||
git pull
|
||
|
||
# 4. 执行部署脚本
|
||
./deploy_flutter_web.sh
|
||
```
|
||
|
||
### 方式2: 手动部署
|
||
|
||
```bash
|
||
# 1. 进入项目目录
|
||
cd /www/wwwroot/monisuo
|
||
|
||
# 2. 拉取最新代码
|
||
git pull
|
||
|
||
# 3. 清理旧文件
|
||
rm -rf /www/wwwroot/monisuo-h5/*
|
||
|
||
# 4. 复制新构建文件
|
||
cp -r flutter_monisuo/build/web/* /www/wwwroot/monisuo-h5/
|
||
|
||
# 5. 设置权限
|
||
chown -R www:www /www/wwwroot/monisuo-h5
|
||
chmod -R 755 /www/wwwroot/monisuo-h5
|
||
|
||
# 6. 检查文件
|
||
ls -lh /www/wwwroot/monisuo-h5/main.dart.js
|
||
ls -lh /www/wwwroot/monisuo-h5/canvaskit/canvaskit.wasm
|
||
```
|
||
|
||
## 配置 Nginx WASM MIME 类型
|
||
|
||
检查并添加 WASM MIME 类型：
|
||
|
||
```bash
|
||
# 编辑 Nginx MIME 类型配置
|
||
vim /www/server/nginx/conf/mime.types
|
||
|
||
# 确保包含以下内容：
|
||
application/wasm wasm;
|
||
|
||
# 重启 Nginx
|
||
nginx -t
|
||
nginx -s reload
|
||
```
|
||
|
||
## 验证部署
|
||
|
||
### 1. 检查文件完整性
|
||
|
||
```bash
|
||
# 检查关键文件
|
||
ls -lh /www/wwwroot/monisuo-h5/main.dart.js
|
||
ls -lh /www/wwwroot/monisuo-h5/canvaskit/canvaskit.wasm
|
||
ls -lh /www/wwwroot/monisuo-h5/flutter.js
|
||
ls -lh /www/wwwroot/monisuo-h5/index.html
|
||
|
||
# 检查 WASM 文件数量
|
||
find /www/wwwroot/monisuo-h5 -name "*.wasm" | wc -l
|
||
# 应该输出: 4 或更多
|
||
```
|
||
|
||
### 2. 检查 MIME 类型
|
||
|
||
```bash
|
||
# 测试 WASM 文件的 MIME 类型
|
||
curl -I http://8.155.172.147:8061/canvaskit/canvaskit.wasm
|
||
|
||
# 应该看到:
|
||
# Content-Type: application/wasm
|
||
```
|
||
|
||
### 3. 清除浏览器缓存
|
||
|
||
- Chrome: `Ctrl + Shift + Delete` (Windows) 或 `Cmd + Shift + Delete` (Mac)
|
||
- 选择 "缓存的图片和文件"
|
||
- 点击 "清除数据"
|
||
|
||
## 常见问题
|
||
|
||
### 问题1: 仍然加载失败
|
||
|
||
**解决方案：**
|
||
```bash
|
||
# 强制刷新 Nginx 缓存
|
||
nginx -s reload
|
||
|
||
# 检查 Nginx 错误日志
|
||
tail -f /www/server/nginx/logs/error.log
|
||
```
|
||
|
||
### 问题2: MIME 类型不正确
|
||
|
||
**解决方案：**
|
||
```nginx
|
||
# 在 Nginx 站点配置中添加
|
||
location ~* \.wasm$ {
|
||
types {
|
||
application/wasm wasm;
|
||
}
|
||
add_header Content-Type application/wasm;
|
||
}
|
||
```
|
||
|
||
### 问题3: 文件权限问题
|
||
|
||
**解决方案：**
|
||
```bash
|
||
# 修复权限
|
||
chown -R www:www /www/wwwroot/monisuo-h5
|
||
chmod -R 755 /www/wwwroot/monisuo-h5
|
||
```
|
||
|
||
## 部署检查清单
|
||
|
||
- [ ] 代码已拉取到最新版本
|
||
- [ ] main.dart.js 文件存在且完整（约 3.2MB）
|
||
- [ ] canvaskit/canvaskit.wasm 文件存在（约 6.8MB）
|
||
- [ ] 所有 WASM 文件都已复制（4个或更多）
|
||
- [ ] 文件权限正确（755）
|
||
- [ ] 文件所有者正确（www:www）
|
||
- [ ] Nginx 已配置 WASM MIME 类型
|
||
- [ ] Nginx 已重启
|
||
- [ ] 浏览器缓存已清除
|
||
- [ ] 页面可以正常访问
|
||
|
||
## 联系支持
|
||
|
||
如果问题仍然存在，请检查：
|
||
1. Nginx 错误日志：`/www/server/nginx/logs/error.log`
|
||
2. 浏览器控制台的详细错误信息
|
||
3. 网络请求是否正常（Chrome DevTools → Network 标签）
|