Flutter WebView加载文件遇URL超限报错，求解决方法

这个警告的核心原因是你把本地HTML、JS、CSS的内容直接拼接成data: URI来加载，而WebView对data URI的长度有2MB（2097152字节）的限制，和minSDK版本无关。以下是几种可行的解决办法：

• 用本地服务器加载文件
  启动一个本地HTTP服务器，把本地文件作为静态资源提供，让WebView加载服务器的URL，彻底避开URI长度限制。可以用Flutter自带的HttpServer实现，示例代码：

  import 'dart:io';
  import 'package:flutter/material.dart';
  import 'package:webview_flutter/webview_flutter.dart';
  
  class LocalWebView extends StatefulWidget {
    @override
    _LocalWebViewState createState() => _LocalWebViewState();
  }
  
  class _LocalWebViewState extends State<LocalWebView> {
    late HttpServer server;
    late WebViewController controller;
  
    @override
    void initState() {
      super.initState();
      _startServer();
    }
  
    void _startServer() async {
      server = await HttpServer.bind(InternetAddress.loopbackIPv4, 8080);
      server.listen((request) async {
        String path = request.uri.path;
        if (path == '/') path = '/index.html';
        final file = File('${Directory.current.path}/web$path');
        if (await file.exists()) {
          final contentType = lookupMimeType(file.path);
          request.response
            ..headers.contentType = ContentType.parse(contentType!)
            ..addStream(file.openRead())
            ..close();
        } else {
          request.response.statusCode = HttpStatus.notFound;
          request.response.close();
        }
      });
  
      controller = WebViewController()
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..loadRequest(Uri.parse('http://localhost:8080'));
      setState(() {});
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: controller != null ? WebViewWidget(controller: controller) : SizedBox(),
      );
    }
  
    @override
    void dispose() {
      server.close();
      super.dispose();
    }
  }
  

• 优化文件大小
  压缩你的HTML、JS、CSS文件，把总大小降到2MB以内：

  • 用工具压缩JS（比如Terser）和CSS（比如CleanCSS）
  • 移除HTML里的冗余空白、注释
  • 把大图片换成WebP格式，或者改成外部链接加载

• 直接加载本地文件路径
  如果用的是webview_flutter插件，直接用loadFile方法加载本地文件的绝对路径，不需要转成data URI：

  final controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadFile('${Directory.current.path}/web/index.html');
  
  WebViewWidget(controller: controller);
  

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