我们发布 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 应用程序从未如此简单。
玩得开心,祝您编程愉快?



