跳到主要内容

将应用程序发布到静态网站

简介​

Flet CLI 提供了 flet build web 和 flet publish 命令，允许将 Flet 应用程序发布到独立的静态网站（SPA），该网站完全在浏览器中运行，使用 Pyodide，不需要服务器端代码。

Pyodide 是 CPython 到 WebAssembly（WASM）的端口，这是一项新兴技术，具有某些限制。

本机 Python 包

本机 Python 包（与“纯”Python 包不同）是部分用 C、Rust 或其他语言编写的包。示例包包括 numpy、cryptography、lxml、pydantic。

Pyodide 附带了一个庞大的内置包列表。然而，要使用 PyPI 上的 Python 包，必须是纯 Python 包或提供了 Emscripten 编译的 wheel。

异步和线程​

发布到静态网站的 Flet 应用程序可以使用同步和异步事件处理程序和方法。 Pyodide 是一个 WebAssembly 应用程序，不支持线程。整个 Flet 都在单个线程中运行，所有同步和异步控制事件处理程序都在同一个线程中运行。如果您的应用程序具有 CPU 密集型逻辑（例如计算 Fibonacci 😄）或“睡眠”以使 UI 更美观，它可能会“挂起”UI。考虑将该逻辑移到服务器并通过 Web API 调用。使用 asyncio.sleep 在异步方法中是 OK 的。

flet build web​

将 Flet 应用程序发布到静态网站。

这是发布静态网站的推荐方法。

前提条件​

Flutter SDK 必须安装在计算机上，以便 flet build web 命令生效。

构建网站​

要将 Flet 应用程序发布到静态网站，请从 Flet 应用程序的根目录运行以下命令：

flet build web

静态网站将被发布到 ./build/web 目录。

测试网站​

您可以使用 Python 的内置 http.server 模块测试发布的 Flet 应用程序：

python -m http.server --directory build/web

在浏览器中打开 http://localhost:8000 以检查发布的应用程序。

打包资产​

一旦网站被发布，所有来自 assets 目录的文件将被复制到网站的根目录。

这允许覆盖例如 favicon.png 或 manifest.json 等内容。

URL 策略​

Flet 应用程序支持两种配置 URL 基于路由的方式：

  • path（默认） - 路径被读取和写入没有哈希。例如，fletapp.dev/path/to/view。
  • hash - 路径被读取和写入到哈希片段中。例如，fletapp.dev/#/path/to/view。

如果托管提供商支持单页应用程序（SPA）渲染，您可以留下默认的“path”URL 策略，因为它提供了漂亮的 URL。

然而，如果托管提供商（如 GitHub Pages）不支持 SPA 模式，则需要使用“hash”URL 策略发布应用程序。

使用 --route-url-strategy 选项更改 URL 策略。

Web 渲染器​

您可以将默认的“canvaskit”Web 渲染器（更多关于渲染器的信息）更改为“html”：

flet build web --web-renderer html

彩色 Emoji​

要减少应用程序的大小，默认的“CanvasKit”渲染器不使用彩色 Emoji，因为彩色 Emoji 字体文件约 8 MB。

您可以使用 --use-color-emoji 标志选择彩色 Emoji：

flet build web --use-color-emoji

或者，切换到“html”渲染器，它使用浏览器字体。

在子目录中托管网站​

多个 Flet 应用程序可以在同一个域名下托管，每个应用程序在其自己的子目录中。

要使发布的 Flet 应用程序在子目录中工作，您需要使用 --base-url 选项：

flet build web --base-url <sub-directory>

例如，如果应用程序的 URL 是 https://mywebsite.com/myapp，则必须使用 --base-url myapp 发布。

flet publish​

将 Flet 应用程序发布到静态网站的替代方法。

与 flet build web 命令相比，不需要在计算机上安装 Flutter SDK。

然而，与 flet build web 命令相比，使用 flet publish 命令生成的静态网站加载速度较慢，因为所有 Python 依赖项现在都是在运行时使用 micropip 安装的，而不是预先打包的。flet build web 也检测到 Pyodide 中的本机 Python 包，例如 bcrypt、html5lib、numpy 等，并从 Pyodide 包注册表中安装它们。

发布应用程序到静态网站​

运行以下命令将 Flet 应用程序发布到独立的静态网站：

flet publish <your-flet-app.py>

静态网站将被发布到 ./dist 目录。

命令可选参数：

  • --pre - 允许 micropip 安装预发布 Python 包。
  • -a ASSETS_DIR, --assets ASSETS_DIR - 资产目录的路径。
  • --app-name APP_NAME - 应用程序名称。
  • --app-description APP_DESCRIPTION - 应用程序描述。
  • --base-url BASE_URL - 基础 URL。
  • --web-renderer {canvaskit,html} - Web 渲染器。
  • --route-url-strategy {path,hash} - URL 路由策略。

测试网站​

您可以使用 Python 的内置 http.server 模块测试发布的 Flet 应用程序：

python -m http.server --directory dist

在浏览器中打开 http://localhost:8000 以检查发布的应用程序。

加载包​

您可以在应用程序启动时加载自定义包从 PyPI，方法是将它们列在 requirements.txt 中。requirements.txt 必须在与 <your-flet-app.py> 同一目录下创建。

每行 requirements.txt 都包含一个包名，后跟可选的版本说明符。

信息

要安装自定义包，Pyodide 使用 micropip - 一个轻量级的 pip 版本，适用于浏览器。

您可以直接在 Flet 应用程序中使用 Micropip API：

import sys

if sys.platform == "emscripten": # 检查是否在 Pyodide 环境中运行
    import micropip
    await micropip.install("regex")

预发布 Python 包​

您可以允许加载预发布版本的 PyPI 包，方法是将 --pre 选项添加到 flet publish 命令：

flet publish <your-flet-app.py> --pre

资产​

如果您的应用程序需要资产（图像、字体等），您可以使用 --assets <directory> 选项将它们复制到网站目录：

flet publish <your-flet-app.py> --assets assets
注意

如果您在应用程序目录中有 assets 目录，并且不指定 --assets 选项，则 assets 的内容将与 Python 应用程序一起打包，而不是复制到 dist。

URL 策略​

Flet 应用程序支持两种配置 URL 基于路由的方式：

  • Path（默认） - 路径被读取和写入没有哈希。例如，fletapp.dev/path/to/view。
  • Hash - 路径被读取和写入到哈希片段中。例如，fletapp.dev/#/path/to/view。

如果托管提供商支持单页应用程序（SPA）渲染，您可以留下默认的“path”URL 策略，因为它提供了漂亮的 URL。

然而，如果托管提供商（如 GitHub Pages）不支持 SPA 模式，则需要使用“hash”URL 策略发布应用程序。

要指定“hash”URL 策略，请使用 --route-url-strategy 选项：

flet publish <your-flet-app.py> --route-url-strategy hash

Web 渲染器​

您可以将默认的“canvaskit”Web 渲染器更改为“html”：

flet publish <your-flet-app.py> --web-renderer html

彩色表情符号​

为了减少应用程序大小，默认的 "CanvasKit" 渲染器不使用彩色表情符号，因为包含彩色表情符号的字体文件大约有 8 MB。

但是，您可以通过 --use-color-emoji 标志选择使用彩色表情符号：

flet publish <your-flet-app.py> --use-color-emoji

或者，切换到使用浏览器字体的 html 渲染器。

在子目录中托管网站​

多个 Flet 应用程序可以托管在一个域上，每个应用程序在自己的子目录中。

要使发布的 Flet 应用程序在子目录中工作，必须使用 --base-url 选项发布它：

flet publish <your-flet-app.py> --base-url <sub-directory>

例如，如果应用程序的 URL 是 https://mywebsite.com/myapp，则必须使用 --base-url myapp 发布。