我们发布 Flutter

这是一个简单的文档,用于在 GitHub Pages 上发布 Flutter Web 应用程序,并与朋友和同事分享。

第一步

安装 Flutter。只需按照我们系统的 https://docs.flutterdart.cn/get-started/install 下的步骤进行操作。

第二步

创建一个新的 Flutter 项目。其中包含一个演示应用程序,该应用程序也在此存储库下发布。

flutter create we_publish_flutter

我们已经可以在 Chrome 中本地启动应用程序了。

cd we_publish_flutter
flutter run -d chrome

第三步

构建 Web 应用程序,从我们的 Dart/Flutter 文件构建 HTML/JS 文件。

flutter build web --base-href /we_publish_flutter/

❗ ❗ ❗ 注意 ❗ ❗ ❗

需要参数 –base-href,因为我们存储库中的页面不是基于根目录,而是基于我们为 GitHub 存储库选择的名称。该参数可以在生成的 index.html 文件中找到。

  <base href="/we_publish_flutter/">

这会在 ./build/web 文件夹中创建构件。

现在我们将 ./build/web 中的所有文件复制到 ./docs(如果不存在,请创建该文件夹)。

开发部分到此结束,现在我们来发布它吧?

第一步

创建 GitHub 账户和/或公共存储库 (https://github.com/)。按照 GitHub 的说明使用 GIT 初始化项目。

git init
git add .
git remote add origin https://github.com/XXXXXXXXXXXXXXXX
git commit -m "Init Project"
git branch -M main
git push -u origin main

现在所有文件都已推送到 GitHub。

第二步

现在我们从 /docs 文件夹发布网页。

我们编辑设置(从菜单栏)。

并在左侧导航栏中选择 Pages。

在这里我们修改参数。

如下所示。

  • 从分支部署。
  • 将分支切换到 main。
  • 将 /(root) 切换到 /docs。
  • 保存。

现在可以在 Actions 下面跟踪构建过程。

第三步

恭喜,我们已经发布了我们的页面。现在我们可以通过我们的域名/存储库名称访问它,以我的为例:https://dartisan-lu.github.io/we_publish_flutter/

附加步骤

如果您想清理项目的统计信息,

并删除生成的 `Dart` 文件,请在项目根目录中添加一个名为:.gitattributes 的文件,并包含以下值:

android/** linguist-vendored
ios/** linguist-vendored
web/** linguist-vendored
linux/** linguist-vendored
macos/** linguist-vendored
windows/** linguist-vendored
docs/** linguist-vendored

现在项目应该是 100% Dart 的。

就是这样,创建和发布 Web 应用程序从未如此简单。

玩得开心,祝您编程愉快?

GitHub

查看 Github