没有服务器如何发布自己的 flutter web 项目
引言
小编最近尝试了使用 flutter web 开发项目工具(打印模版设计方案)。由于仅是个人工具，没有放在公司的服务器上。在没有个人服务器资源的情况下，小编尝试了两种方案发布部署自己的 web 项目。
两种部署方式的产物如下，由于没做手机端web的UI适配，请在电脑端的浏览器打开预览：
- https://liyufengrex.github.io/flutter_json_layout_preview/
- https://flutter-json-layout.web.app
flutter web 如何打包
在发布前，我们需要先将我们的flutter项目打包编译成 web 资源：
flutter build web --web-renderer canvaskit
为了统一多端交互体验，小编使用如上命令行指定使用 canvaskit 渲染模式进行 web 打包。
打完包之后，同样会在工程目录下生成build目录，用于存放构建结构，下面有一个web目录，就是存放Web项目的打包后结果
这个 web 文件里的内容就是等会儿我们要发布部署的内容，留待备用，下面我们先来看看如何在服务端进行部署。
方案一：使用 Github pages 发布部署
第一步：在自己的 github 上 create a new repository
比如：小编创建的项目叫做 flutter_json_layout_preview
第二步：操作
-
- 把 github 仓库 clone 下来
-
- 把 web 的构建结果复制到我们的 github 仓库的本地目录中去
-
- 修改构建结果中的
index.html文件中的base标签，修改成你 github 仓库的名字，不然关联不到相对路径资源文件，例如:
- 修改构建结果中的
-
- 操作完后，把内容 push 到远端
-
- 来到 github，进入到远端仓库的 Settings 页面，进行如下操作
- 6. 等待一会，刷新下页面，github会提示你部署成功，可以通过该链接访问
点击预览效果：https://liyufengrex.github.io/flutter_json_layout_preview/
由于没在 flutter 代码中区分桌面端|手机端做UI适配，在桌面端的浏览器点击打开效果最佳。
PS:
需要做区分的同学可以参考使用 adaptive_breakpoints
bool isDisplayDesktop(BuildContext context) =>
!isDisplayFoldable(context) &&
getWindowType(context) >= AdaptiveWindowType.medium;
方案二：使用 Firebase Hosting 发布部署
感兴趣的同学可以看看关于 firebase hosting 的官方介绍
-
- 使用
npm安装 Firebase CLI:
- 使用
npm install -g firebase-tools
-
- 使用 Google 帐号登录 Firebase
firebase login
-
- 打开你的 firebase 控制台添加一个新的项目
https://console.firebase.google.com/?hl=zh-cn
填写项目名称，一路允许，例如小编创建了一个项目名称为 flutter-json-layout:
-
- 在本地电脑新建一个文件夹（名字随意），例如：小编新建的文件夹也叫 flutter-json-layout
-
- 在刚刚新建的文件夹里再新建一个子文件夹叫 public
-
- 将把 web 的构建结果（build/web文件夹中的所有内容）复制到 public 文件夹内
-
- 修改 修改构建结果中的
index.html文件中的base标签，修改为:
- 修改 修改构建结果中的
<base href="./">
-
- 执行初始化命令行，依次选择如下：
frebase init hosting
-
- 执行部署命令行
firebase deploy --only hosting
部署成功后会显示你的 flutter web 预览路径：
https://flutter-json-layout.web.app（请在桌面端的浏览器点击预览）
本文地址：https://www.vps345.com/1204.html
