云计算百科
云计算领域专业知识百科平台

没有服务器如何发布自己的 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 webrenderer canvaskit

    为了统一多端交互体验,小编使用如上命令行指定使用 canvaskit 渲染模式进行 web 打包。

    打完包之后,同样会在工程目录下生成build目录,用于存放构建结构,下面有一个web目录,就是存放Web项目的打包后结果

    image.png 这个 web 文件里的内容就是等会儿我们要发布部署的内容,留待备用,下面我们先来看看如何在服务端进行部署。

    方案一:使用 Github pages 发布部署

    第一步:在自己的 github 上 create a new repository

    image.png

    比如:小编创建的项目叫做 flutter_json_layout_preview

    image.png

    第二步:操作

    • 把 github 仓库 clone 下来
    • 把 web 的构建结果复制到我们的 github 仓库的本地目录中去
    • 修改构建结果中的 index.html 文件中的base标签,修改成你 github 仓库的名字,不然关联不到相对路径资源文件,例如:

    image.png

    image.png

    • 操作完后,把内容 push 到远端
    • 来到 github,进入到远端仓库的 Settings 页面,进行如下操作

    image.png

    • 6. 等待一会,刷新下页面,github会提示你部署成功,可以通过该链接访问

    image.png

    点击预览效果: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 firebasetools

    • 使用 Google 帐号登录 Firebase

    firebase login

    • 打开你的 firebase 控制台添加一个新的项目

    https://console.firebase.google.com/?hl=zh-cn

    image.png 填写项目名称,一路允许,例如小编创建了一个项目名称为 flutter-json-layout:

    image.png

    • 在本地电脑新建一个文件夹(名字随意),例如:小编新建的文件夹也叫 flutter-json-layout
    • 在刚刚新建的文件夹里再新建一个子文件夹叫 public

    image.png

    • 将把 web 的构建结果(build/web文件夹中的所有内容)复制到 public 文件夹内
    • 修改 修改构建结果中的 index.html 文件中的base标签,修改为:

    <base href="./">

    • 执行初始化命令行,依次选择如下:

    frebase init hosting

    image.png

    • 执行部署命令行

    firebase deploy only hosting

    image.png

    部署成功后会显示你的 flutter web 预览路径: https://flutter-json-layout.web.app(请在桌面端的浏览器点击预览)

    赞(0)
    未经允许不得转载:网硕互联帮助中心 » 没有服务器如何发布自己的 flutter web 项目
    分享到: 更多 (0)

    评论 抢沙发

    评论前必须登录!