Flutter Web从0到部署上线的实践

1.前言

首先说明一下，这篇文章是给具备Flutter开发经验的客户端同学看的。Flutter的诞生虽然来自Google的Chrome团队，但大家都知道Flutter最先支持的平台是Android和iOS，至今最核心的维护平台依然是Android和iOS。由于dart语言的学习成本不高，Flutter的响应式UI与ComposeUI和SwiftUI都有极大的相似之处，整体的架构思路也更偏向于客户端的模式，再加上为了实现很多硬件或Native相关的基础功能也需要专业的客户端开发知识，所以Flutter更多的是被客户端开发同学认可并使用（在我们的团队中，Flutter已经是客户端开发同学的必备基本技能）。
在此背景下，Flutter最初并不在web端上发力。不过由于Flutter本身就是携带了web的基因，在Flutter2发布的同时也发布了web的稳定版。那么它有什么优势和劣势呢？

  • 优势：
    1. 零学习成本：当你已经掌握了Flutter开发能力后，哪怕你对html，css，JavaScript和主流的前端框架不那么了解，也不影响你开发web应用。
    2. 跨端能力：可将现有Flutter移动应用拓展到web，在多个平台共享代码，降低开发成本。
  • 劣势：
    1. 兼容性问题：使用html模式来进行渲染时，应用的大小相对较小但可能会出现兼容性问题。
    2. 包体积增加：使用canvaskit模式来进行渲染时，虽然性能较好，且可以降低不同浏览器渲染效果不一致的风险，但会增加包体积。

分析了优势劣势后，我们发现如果单纯的做个web端应用，Flutter并没有优势，前端开发同学大概也不会使用Flutter进行web开发（确实没必要，比如包体积增加或有一定的性能损失，还需要学习新语言与开发思路，原生开发不香么），Flutter Web到底有什么用呢？
带着这样的想法，在使用Flutter后的很长时间都不曾调研过web端的支持。但随着业务和内部需求的发展变化，我们有了使用Flutter进行web开发的想法。下面我来说一下使用Flutter Web主要的三个场景。

2.Flutter Web的使用场景

  • 1.客户端团队内部的web需求：在后疫情时代降本增效的大背景下，我们会更多的使用自研工具。自研工具的使用和结果展示的可视化通常以网页的形式展现。客户端同学使用Flutter Web进行网页开发学习成本低，完全可以快速的开发网页（本人在使用Vue框架进行web端开发时感受出客户端和前端的UI布局思路还是有很大不同的，css很灵活约束性低，这个与客户端布局的强约束性差异很大，所以对于客户端开发来说，使用Flutter开发网页应用时更顺手。对于全员掌握Flutter技能的我们团队来说已经是0成本了）。
  • 2.简单的web端业务需求：web端承载了很多活动需求，这些需求的特点是时效性强，功能较简单，且不需长期维护。但这些需求经常是在某一时间段大量产生的（比如逢年过节的一些活动或榜单），或突然产生的（比如蹭热点的即时需求）。这些工作的插入有时会导致一些长期迭代的web端需求需要延期，影响团队的整体排期。由于这些需求开发难度不大，性能要求不高，不需长期维护（意味着即使团队里不再有人使用Flutter或Flutter Web有一天挂了也没什么影响），那么就可以让Flutter开发同学加入进来，平摊了一部分工作，以此来提升整个团队的效率。
  • 3.客户端与web端的跨端：随着Flutter Web趋于稳定，用Flutter实现的App可以低成本的被打包成web版了，毕竟对于用户来说使用浏览器打开个网页比下载个App成本低多了。这种情况下我们就可以利用Flutter的跨端优势，节约很多人力资源，避免去重新开发一套web端了。

好的既然有了使用场景，我们就好好来走一下Flutter Web是怎么开发部署上线的流程。

3.Flutter Web工程的创建和业务实现

3.1.创建与运行

我们使用Android Studio作为IDE，以Flutter 3.10.5版本为基础创建一个Flutter Web工程。
创建一个New Flutter Project，在选择Platforms的时候只勾选Web，然后直接Create。

1688699928797.jpg

然后我们发现在工程目录里多了个web的文件夹：
1688700083835.jpg

如果想要run起来只需选择chrome浏览器，点击run就行了：
1688700684131.jpg

然后我们就可以在浏览器看到运行结果了，当然我们也可以打开开发者模式方便查看与调试：
截屏2023-07-07 11.33.06.png

这部分跑通后，非常恭喜你可以愉快的用Flutter开发网页了，接下来我们实现一个业务需求：做一个网页搜索功能。
1688701369235.jpg

业务功能上的开发实现我就不做赘述了，可以告诉做过Flutter开发的同学，没什么不同，基础配置/网络模块/数据共享/路由等该怎么封装就怎么封装，我也不过是直接拿了之前客户端Flutter工程相应模块的代码，稍作修改而已。UI上的开发也是该怎么布局怎么布局，业务的开发体验上和客户端使用Flutter没什么不同。

3.2.调试

跑通后应该如何调试呢？
如果熟悉浏览器开发者模式，可直接使用浏览器进行调试，打log或debug都是没问题的，也可以看到源码，可以抓包：

1688709563331.jpg

1688709581159.jpg

1688709612744.jpg

当然客户端同学可能不熟悉浏览器开发者模式，也没关系，利用Android Studio，之前在客户端写Flutter怎么调试，现在写web端依旧可以怎么调试。

3.3.window

在web端开发的时候我们通常会使用window对象进行一些操作。window对象代表一个浏览器窗口或一个框架。常用的event监听，打开网页等操作都需要window对象。
Flutter自带的dart:html封装了window，我们可以通过它来实现获取window的属性或对window进行操作，比如：

//打开网页
window.open("http://www.baidu.com","");

//监听event
window.addEventListener("mousedown", (event) => {
     //do something
});

另外window也可以帮助我们区分运行环境。

3.4.浏览器运行环境区分

客户端通常需要区分的是Android和iOS这两个不同的运行环境，而web端是需要通过UA来区分不同的浏览器环境的，不同环境下的UI/逻辑等会有差别。在国内，我们最常需要区分PC端/移动端/Android端/iOS端/微信网页/微信小程序这几个。那么我们可以定义一个类，利用window.navigator.userAgent去区分这些环境：

import 'dart:html';

class DeviceUtil {
  static final DeviceUtil _instance = DeviceUtil._private();

  static DeviceUtil get() => _instance;

  factory DeviceUtil() => _instance;

  late String ua;

  DeviceUtil._private() {
    ua = window.navigator.userAgent;
  }

  //移动端
  isMobile() {
    return RegExp(
        r'phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone')
        .hasMatch(ua);
  }

  //iOS端
  isIos() {
    return RegExp(r'\(i[^;]+;( U;)? CPU.+Mac OS X').hasMatch(ua);
  }

  //Android端
  isAndroid() {
    var isAndroid = ua.contains("Android") || ua.contains("Adr");
    return isAndroid;
  }

  //微信环境
  isWechat() {
    return ua.contains("MicroMessenger");
  }

  //微信小程序环境
  isMiniprogram() {
    if (ua.contains("micromessenger")) {
      //微信环境下
      if (ua.contains("miniprogram")) {
        //小程序;
        return true;
      }
    }
    return false;
  }
}

3.5.开发/测试/生产环境区分

同客户端一样，web端也需要区分开发/测试/生产环境。同客户端的方式一样，我们还是可以通过配置不同的入口文件来实现环境的区分。如：

  • main_dev.dart
void main() {
  AppConfig.init(ConfigType.dev);
  root_main.main();
}
  • main_test.dart
void main() {
  AppConfig.init(ConfigType.test);
  root_main.main();
}
  • main_online.dart
void main() {
  AppConfig.init(ConfigType.online);
  root_main.main();
}

在AppConfig.init()就可以根据不同的环境做不同的配置了。

3.6.其他常用库或插件

关于数据共享/网络/UI/动画等库就不做介绍了，因为这些库和平台不相关，用各自熟悉的就好，下面是来介绍一下为了实现一些浏览器相关功能需要用到的插件。

  • shared_preferences
    在客户端开发的时候，我们知道如果需要对一些数据实现轻量级的本地序列化可以使用shared_preferences，其实现对应Android的SharedPreferences和iOS的NSUserDefaults。而在进行web开发的时候，我们知道如需在本地序列化一些数据的话，可以使用LocalStorage。其实Flutter的shared_preferences插件也是支持web的，其实现也正是封装了LocalStorage。关于shared_preferences的使用也不做赘述了，已经非常熟悉了。
  • image_picker_for_web
    来自于我们熟悉的image_picker插件。根据浏览器的不同，支持或部分支持拍照/拍视频/读取图片/读取视频等。
  • js
    这个插件是用来使用注解的方式帮助你用Dart调用JavaScript API或用JavaScript调用Dart API的。

好了，到此为止，我觉着使用Flutter开发一个常规的web业务已经不成问题了。接下来我们探讨一下如何打包部署上线呢？

4.打包部署上线

4.1.打包

Flutter Web的打包非常简单，运行：

flutter build web

即可。但这样显然是不够的，因为我们需要区分环境来打不通的包。
在上一章节我们配置了不同的入口文件，我们以dev环境为例，其入口文件是main_dev，那么我们的打包命令就变成了：

flutter build web -t lib/main_dev.dart

这行命令执行完成后，报错了，报错信息如下：


1688715398852.jpg

这是个图标数据加载问题，我们加上--no-tree-shake-icons即可。执行命令如下：

flutter build web -t lib/main_dev.dart --no-tree-shake-icons

然后我们就会在项目根目录的build文件夹下找到web这个文件夹，对应的就是web前端打出来的dist文件夹。包含了以下文件：

1688713886562.jpg

编译产物有了，那么如何部署呢？

4.2.部署

官方给了如下的部署方式：
https://flutter.cn/docs/deployment/web#deploying-to-the-web
看了官方文档后我发现，这三种部署方式并不适用于我们的项目。由于CDN具有提高网站性能和用户体验，减轻原始服务器的负载等优势，目前我们团队已经搭建了CDN部署平台。既然如此，我们的部署方案也需要往这方面靠。

4.2.1.方案1——修改index.html

我先来简单说明一下FlutterWeb编译产物，重点有两个：flutter.js和main.dart.js。其中flutter.js为入口的js文件，我们可以打开web目录下index.html：

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <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_web">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>flutter_web</title>
  <link rel="manifest" href="manifest.json">
  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code --></script>-->
  <script src="flutter.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine({
        }).then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>
</body>
</html>

看到<script src="flutter.js" defer></script>这行。而main.dart.js是我们的dart业务代码被编译成的js文件。flutter.js会加载main.dart.js和其它文件。默认情况下，flutter.js会加载各个文件，包括资源文件(assets)都使用的是相对路径。首先就是通过loadEntrypoint ()方法加载main.dart.js这个文件：

//flutter.js
async loadEntrypoint(options) {
      const { entrypointUrl = `${baseUri}main.dart.js`, onEntrypointLoaded } =
        options || {};

      return this._loadEntrypoint(entrypointUrl, onEntrypointLoaded);
    }

但我们发现貌似entrypointUrl是可以自己传递的，于是我们从官网文档里找到了自定义web应用初始化的链接：
https://flutter.cn/docs/platform-integration/web/initialization
有如下的参数可传：

1688716397910.jpg

截屏2023-07-07 15.53.54.png

其中loadEntrypoint()方法可以传递entrypointUrl参数来指定main.dart.js的路径。而initializeEngine()方法可以通过传递assetBase参数来指定CDN资源路径。这么看来我们完全可以通过将这两个参数设置为绝对路径来解决main.dart.js的加载与CDN资源路径的问题。需要注意的是initializeEngine()方法是Flutter3.7.0开始才支持的。
我们改一下index.html：

    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        entrypointUrl: "YOUR_CDN_ABSOLUTE_PATH/main.dart.js",
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine({
          assetBase: "YOUR_CDN_ABSOLUTE_PATH"
        }).then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });

我们再打个包，还是会报错，找不到flutter.js，还是因为路径问题。处理方式更简单了，直接在index.html里配置成绝对路径即可。另外我们发现Icon-192.png，favicon.png，manifest.json这几个文件也是相对路径，那么我们一次性都改成绝对路径：

<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <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_web">
  <link rel="apple-touch-icon" href="YOUR_CDN_ABSOLUTE_PATH/icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="YOUR_CDN_ABSOLUTE_PATH/favicon.png"/>

  <title>flutter_web</title>
  <link rel="manifest" href="YOUR_CDN_ABSOLUTE_PATH/manifest.json">
  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="YOUR_CDN_ABSOLUTE_PATH/flutter.js" defer></script>
</head>

再打个包上传到CDN，嗯一切都正常了～
到这里看上去都完美了，但突然想起来不对啊，我们是区分开发/测试/生产环境的，相应的CDN路径也是不同的。修改index.html的方式指定的都是绝对路径，不符合我们的需求啊。经过调研，找到了另一种方式。

4.2.2方案2——--base-href

重新看index.html的代码，发现最上面注释：

  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

大概意思是，我们可以在使用flutter build打包的使用通过--base-href参数指定base href的值。赶紧查看了一下base href的相关说明：

base标记是一个基链接标记，是一个单标记。用以改变文件中所有连结标记的参数内定值。它只能应用于标记<head>与</head>之间。
你网页上的所有[相对路径]在链接时都将在前面加上基链接指向的地址。

既然如此，我们就试试吧～
打包命令更新如下：

flutter build web -t lib/main_dev.dart --base-href YOUER_CDN_PATH --no-tree-shake-icons

需要注意的是YOUER_CDN_PATH并非绝对路径，而是去掉host的路径。比方你的绝对路径是：

https://cdn-path.com/your/business/path/dev/

那么你的YOUER_CDN_PATH应为：

/your/business/path/dev/

再打个包上传到CDN上，一切真正的完美了～

5.总结

我们利用Flutter完成了一个web项目的开发，并且部署到CDN上。另外在web端还有一些常见的问题，比方说跨域问题，这些需要和服务端同学共同解决，都是现成的方案。当然如果是在本地调试阶段（也仅限于本地调试的情况），你也可以通过以下步骤解决跨域问题：

  • 1.前往flutter\bin\cache文件夹，删除flutter_tools.stamp文件。
  • 2.前往flutter\packages\flutter_tools\lib\src\web，打开chrome.dart文件。
  • 3.找到'--disable-extensions'这部分，在最下面添加'--disable-web-security'，重新build即可。

FlutterWeb虽然已经稳定了一段时间了，但是除非是有明确的跨端需求，并不推荐大家将它用在需要长期迭代，大而重的项目中。不过对于我们客户端开发来说，在拥有了Flutter的技能后，除去我们所熟悉的Android和iOS跨端开发，完全可以拓展自己的业务范畴，分摊一些合适的web端项目进行开发，为自己的团队增加更多的业务可能。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容