monisuo/DEPLOY_GUIDE.md

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: 使用部署脚本（推荐）

# 1. SSH 登录服务器
ssh root@8.155.172.147

# 2. 进入项目目录
cd /www/wwwroot/monisuo

# 3. 拉取最新代码
git pull

# 4. 执行部署脚本
./deploy_flutter_web.sh

方式2: 手动部署

# 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 类型：

# 编辑 Nginx MIME 类型配置
vim /www/server/nginx/conf/mime.types

# 确保包含以下内容：
application/wasm  wasm;

# 重启 Nginx
nginx -t
nginx -s reload

验证部署

1. 检查文件完整性

# 检查关键文件
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 类型

# 测试 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: 仍然加载失败

解决方案：

# 强制刷新 Nginx 缓存
nginx -s reload

# 检查 Nginx 错误日志
tail -f /www/server/nginx/logs/error.log

问题2: MIME 类型不正确

解决方案：

# 在 Nginx 站点配置中添加
location ~* \.wasm$ {
    types {
        application/wasm wasm;
    }
    add_header Content-Type application/wasm;
}

问题3: 文件权限问题

解决方案：

# 修复权限
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 标签）