背景

因公司新项目启动，需要给出一个web版本的核心demo，上一个项目是flutter写的windows应用，正好趁机熟悉一下flutter在web开发的使用。

新建工程

IDE为android studio,新建flutter工程，没什么差别，记得勾选web就行，目录结构如图：

新手注意的地方

1、让 Flutter 使用 path 策略

在main.dart中，需要导入flutter_web_plugins/url_strategy.dart包，并在main(){}函数中usePathUrlStrategy();这是官方文档中让Flutter 使用 path 策略的方法：
使用前url可能长这样：flutterexample.dev/#/path/to/screen，使用后：flutterexample.dev/path/to/screen

import 'package:flutter_web_plugins/url_strategy.dart';
void main() async {
  await Global.init(); // 初始化sp本地存储
  usePathUrlStrategy();
  runApp(const MyApp());
}

2、使用本地化存储shared_preferences

这里需要注意的是，引入Getx框架的Get_storage，可以实现对象存储，但刷新网页后，数据会重置。因此需要使用shared_preferences来实现数据本地持久化。

打包应用

运行flutter build web --release打包，build/web将会生成一个包含Flutter Web 应用程序的静态文件夹。

优化打包 - 加快web访问加载速度

// 构建web版本，使用：
1) 基础优化命令
flutter build web --release // 构建发布版本，会进行代码优化和压缩
     --web-renderer html  // HTML 渲染器初始加载更快,文件体积更小,在低端设备上性能更好,但在复杂动画和自定义绘制时性能可能不如 CanvasKit
     --dart-define=flutter.web.webgl=false // 禁用webgl，减少文件体积,提高兼容性
     --tree-shake-icons  // 启用图标 tree-shaking
     --pwa-strategy none  // 不生成 PWA (Progressive Web App) 相关文件,不需要离线缓存功能,减少生成的文件数量
     --dart2js-optimization O4  // 最高级别的代码优化,更激进的代码压缩,可能会增加编译时间
     --no-source-maps  // 不生成源码映射文件,显著减小最终构建体积,但会影响调试能力
     --csp // 启用内容安全策略,生成更安全的代码,可能会稍微减小体积

2) 不使用canvaskit进行渲染，大大缩短页面加载时间。
flutter build web --release --web-renderer html --dart-define=flutter.web.webgl=false --tree-shake-icons --pwa-strategy none --dart2js-optimization O4 --no-source-maps --csp

3) 也可以在index.html中加入以下脚本，定义从本地加载canvaskit.js：
/**
<script>
  window.flutterConfiguration = {
      canvasKitBaseUrl: "/canvaskit/"
  };
</script>
 */

最后将打包后的文件部署到任何支持静态文件的 Web 服务器上。比如 /www/wwwroot/my_domain下：

*Nginx下需要配置文件设置:

server
{
    listen 80;
    server_name WWW.YOURDOMAIN.COM;
    index index.html index.htm default.htm default.html;
    root /www/wwwroot/my_domain;
    # 防止直接访问子url会404;
    location / {
        try_files $uri $uri/ /index.html;
    }
  ......
}

如果要使用docker部署，则在release目录下新建Dockerfile(注意此文件没有后缀名)配置文件,并输入以下内容：

# 使用 Nginx 作为基础镜像
FROM nginx:latest

# 设置工作目录
WORKDIR /usr/share/nginx/html

# 复制 Flutter Web 应用的 release 文件到工作目录
COPY build/web/ .

# 配置 Nginx 以处理路由
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露 Nginx 的默认端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

请注意，上述 Dockerfile 使用了 Nginx 作为基础镜像。此外，还需要提供一个 nginx.conf 文件，以确保 Nginx 正确处理 Flutter Web 应用程序的路由。以下是一个简单的 nginx.conf 文件示例：

server {
    listen 80;
    server_name WWW.YOURDOMAIN.COM;

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

请将这两个文件放在与 Dockerfile相同的目录中(release文件夹下)。然后使用以下命令构建和运行 Docker 容器：

docker build -t my_image_name .

将构建好的my_image_name文件上传至服务器后，切换到当前目录执行：

docker run -p 8080:80 my_image_name

确保端口映射适用于当前服务器的环境，并且可以通过浏览器访问 http://WWW.YOURDOMAIN.COM:8080 来查看Flutter Web 应用程序。

以上