Flutter Web项目如何在GitHub上发布

我想把Flutter Web项目发布到GitHub上，但不太清楚具体操作步骤。请问如何正确部署Flutter Web项目到GitHub Pages？是否需要额外配置才能让网页正常显示？另外，发布后如果遇到404错误该如何解决？

2 回复

在GitHub上发布Flutter Web项目：

  1. 运行 flutter build web 生成构建文件。
  2. 将 build/web 目录内容上传到GitHub仓库。
  3. 在仓库设置中启用GitHub Pages，选择构建目录为 / (root) 或 /docs。
  4. 访问生成的链接即可查看项目。

更多关于Flutter Web项目如何在GitHub上发布的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter Web项目中，通过GitHub Pages发布非常简单。以下是详细步骤：

1. 构建Flutter Web项目

flutter build web --release

这会在build/web目录生成优化后的静态文件。

2. 准备GitHub仓库

  • 在GitHub创建新仓库
  • 将项目推送到仓库（如果尚未推送）

3. 配置GitHub Pages

方法一：使用gh-pages分支

# 切换到build/web目录
cd build/web

# 初始化git仓库
git init
git add .
git commit -m "Deploy Flutter Web"

# 添加远程仓库并推送到gh-pages分支
git remote add origin https://github.com/你的用户名/你的仓库名.git
git push -f origin main:gh-pages

方法二：使用GitHub Actions（推荐）

在项目根目录创建.github/workflows/deploy.yml：

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.x'
          
      - run: flutter pub get
      - run: flutter build web --release
      
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build/web

4. 启用GitHub Pages

  1. 进入仓库设置 → Pages
  2. 源选择：GitHub Actions 或 gh-pages分支
  3. 保存后访问提供的URL（格式：https://用户名.github.io/仓库名）

注意事项

  • 确保index.html中的资源路径正确
  • 如需自定义域名，在仓库设置中添加CNAME文件
  • 首次部署可能需要几分钟生效

这样就完成了Flutter Web项目的GitHub Pages部署！

回到顶部