Flutter Web集成Monaco Editor：解决requireJS冲突与构建停滞问题

直接全局定义 var require 会和 Flutter Web 内置的 requireJS 产生冲突，改用 Monaco 官方推荐的异步加载+局部配置方式即可解决。以下是完整可用的 index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <base href="$FLUTTER_BASE_HREF">
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="Flutter Web 集成 Monaco Editor">
  <!-- iOS 适配标签 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Flutter Monaco Demo">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">
  <!-- 网站图标 -->
  <link rel="icon" type="image/png" href="favicon.png"/>
  <title>Flutter Monaco Demo</title>
  <link rel="manifest" href="manifest.json">
  <script>
    // 配置 Monaco Worker 加载路径，避免跨域或资源找不到问题
    window.MonacoEnvironment = {
      getWorkerUrl: function (moduleId, label) {
        return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
          self.MonacoEnvironment = {
            baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/'
          };
          importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/base/worker/workerMain.js');
        `)}`;
      }
    };
  </script>
  <!-- 加载 Monaco 自带的 require 加载器 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.js"></script>
  <script>
    // 局部配置 Monaco 资源路径，不覆盖全局 require
    require.config({
      paths: {
        vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs'
      }
    });
  </script>
  <script>
    var serviceWorkerVersion = null;
    var scriptLoaded = false;
    function loadMainDartJs() {
      if (scriptLoaded) return;
      scriptLoaded = true;
      var scriptTag = document.createElement('script');
      scriptTag.src = 'main.dart.js';
      scriptTag.type = 'application/javascript';
      document.body.append(scriptTag);
    }

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        // 确保 Monaco 核心资源加载完成后再初始化 Flutter
        require(['vs/editor/editor.main'], function() {
          var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
          navigator.serviceWorker.register(serviceWorkerUrl);
          loadMainDartJs();
        });
      });
    } else {
      // 不支持 Service Worker 的环境，直接加载 Flutter 主脚本
      require(['vs/editor/editor.main'], loadMainDartJs);
    }
  </script>
</head>
<body>
  <div id="loading"></div>
</body>
</html>

核心解决逻辑 #

1. 避免直接覆盖全局 require 变量，改用 Monaco 自带的 require.config 做局部路径配置
2. 通过 window.MonacoEnvironment 配置 Worker 加载地址，解决 Monaco 编辑器的 Worker 初始化问题
3. 确保 Monaco 核心资源加载完成后再启动 Flutter，避免后续调用 Monaco API 时出现资源未就绪的错误

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