如何在Flutter WebView中离线部署Docusaurus构建站点？

一、检查local_assets_server配置 #

• 把Docusaurus构建好的build文件夹完整复制到Flutter项目的assets目录下，同时在pubspec.yaml里正确声明资源：

  assets:
    - build/** # 通配符确保所有子目录资源都被包含
  

• 启动服务器时，确保路径和端口配置正确：

  final server = LocalAssetsServer(
    assetsPath: 'build',
    address: InternetAddress.loopbackIPv4,
    port: 8080,
  );
  final url = await server.serve();
  

二、调整WebView核心配置 #

• 必须开启JavaScript，Docusaurus完全依赖JS渲染页面：

  WebView(
    initialUrl: url,
    javascriptMode: JavascriptMode.unrestricted,
    // 可以加个错误监听，方便定位问题
    onWebResourceError: (error) {
      print('资源加载失败: ${error.description}');
    },
  )
  

• 拦截单页应用的路由跳转，避免WebView跳转到外部：

  navigationDelegate: (NavigationRequest request) {
    if (request.url.startsWith(url)) {
      return NavigationDecision.navigate;
    }
    return NavigationDecision.prevent;
  },
  

三、修正Docusaurus构建配置 #

• 把Docusaurus的基础路径改成相对路径，否则资源会用绝对路径加载失败：
  在docusaurus.config.js里修改：

  module.exports = {
    baseUrl: './', // 替换原来的绝对路径，比如'/docs/'
    // 其他配置保持不变
  };
  

  改完重新执行npm run build，再把新的build文件夹替换到Flutter项目里。

四、处理平台权限问题 #

• Android：在AndroidManifest.xml里加网络权限（本地服务器也需要）：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS：在Info.plist里允许HTTP请求（本地服务器走HTTP）：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

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