Flutter 3.29.0编译WASM部署Apache报错：期望JS模块但MIME类型为空

你遇到的错误是因为Apache服务器未正确配置WASM及相关模块的MIME类型，同时index.html的脚本标签缺少必要的模块声明，导致浏览器无法正确识别加载的资源。以下是具体修复步骤：

1. 配置Apache的MIME类型 #

Apache默认未为WASM和ES模块文件设置正确的MIME类型，需手动添加。可通过两种方式配置：

• 修改全局配置文件（如httpd.conf或apache2.conf）：

  AddType application/wasm .wasm
  AddType text/javascript .mjs
  

• 使用.htaccess文件（若服务器允许Override）：
  在项目根目录创建或编辑.htaccess，添加上述配置内容。

2. 修正index.html的脚本标签 #

Flutter WASM版本的加载逻辑依赖ES模块，你的脚本标签缺少type="module"属性，导致浏览器无法以模块方式解析代码。将原脚本标签修改为：

<script type="module" async>
    {{flutter_js}}
    {{flutter_build_config}}

    const searchParams = new URLSearchParams(window.location.search);
    const forceCanvaskit = searchParams.get('force_canvaskit') === 'true';
    const userConfig = forceCanvaskit ? {'renderer': 'canvaskit'} : {};

    const loading = document.getElementById('loading');
    const loadingTitle = document.getElementById('loadingTitle');
    loadingTitle.textContent = "Schritt 1/3";
    loading.textContent = "Lade Framework...";

    _flutter.loader.load({
      config: userConfig,
      serviceWorkerSettings: {
        serviceWorkerVersion: {{flutter_service_worker_version}},
      },
      onEntrypointLoaded: async function(engineInitializer) {
        loadingTitle.textContent = "Schritt 2/3";
        loading.textContent = "Initialisiere Engine...";
        const appRunner = await engineInitializer.initializeEngine();

        loadingTitle.textContent = "Schritt 3/3";
        loading.textContent = "Starte App...";
        await appRunner.runApp();
      }
    });
</script>

核心是添加type="module"属性，让浏览器识别这是一个ES模块脚本。

3. 验证文件权限 #

确保Apache进程对Flutter构建生成的build/web目录下所有文件（包括.wasm、.mjs等）有读取权限。通常设置文件权限为644、目录权限为755即可。

为什么强制Canvaskit能正常运行？ #

因为Canvaskit渲染模式下，Flutter会加载预编译的CanvasKit JS模块，该模块不依赖WASM文件加载，因此不会触发MIME类型错误；而默认的HTML渲染模式依赖WASM文件，必须确保服务器正确返回其MIME类型才能正常加载。

内容的提问来源于stack exchange，提问作者progNewbie