search

hhstore / blog

My Tech Blog: about Mojo / Rust / Golang / Python / Kotlin / Flutter / VueJS / Blockchain etc.
https://github.com/hhstore/blog/issues
290 stars 24 forks source link

Flutter: build web app #316

Open hhstore opened 3 years ago

hhstore commented 3 years ago

related:

hhstore commented 3 years ago

flutter web:

初始化一个 flutter web 工程:


// To install: + 更新
pub global activate get_cli 

# 创建一个工程: 

// To create a flutter project in the current directory:
// Note: By default it will take the folder's name as project name
// You can name the project with `get create project:my_project`
// If the name has spaces use `get create project:"my cool project"`
get create project

// To generate the chosen structure on an existing project:
get init

image

run:


flutter run -d chrome --web-renderer html

flutter run -d chrome --web-renderer html --profile

release:


flutter build web --release

# 指定 html 发布:
flutter build web --release --web-renderer html

# 不要使用canvaskit, 会导致首屏加载极慢
flutter build web --web-renderer canvaskit --release

deploy:

local serve:


dhttpd --path build/web/  # Serves app at http://localhost:8080

ngrok http -auth="user:password" file:///Users/alan/share

github pages:

nginx 部署:

hhstore commented 3 years ago

flutter web release:

canvaskit.wasm 加载过慢:


--dart-define=FLUTTER_WEB_CANVASKIT_URL=https://unpkg.zhimg.com/canvaskit-wasm@0.24.0/bin/
--dart-define=FLUTTER_WEB_CANVASKIT_URL=https://npm.elemecdn.com/canvaskit-wasm@0.24.0/bin/
--dart-define=FLUTTER_WEB_CANVASKIT_URL=https://cdn.jsdelivr.net/npm/canvaskit-wasm@0.24.0/bin/

加载速度优化:


# 去掉无用的包:
#  cupertino_icons: ^1.0.2


flutter build web --release --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://cdn.jsdelivr.net/npm/canvaskit-wasm@0.24.0/bin/

总结:

hhstore commented 3 years ago

flutter web 当前的一些坑:

github pages 发布后, 资源 host base 错误:

image

解决案例:


flutter build web --release --web-renderer html --base-href /toolbox/   # fix baseHref

CanvasKit 问题:

社区库的踩坑案例:

案例1:

image

案例2:

SEO 问题:

hhstore commented 3 years ago

flutter web ui 框架:

flutter 官方网站:

responsive_framework:

示例 demo:

Syncfusion:

示例 demo:

hhstore commented 3 years ago

flutter web 响应式代码写法:

hhstore commented 3 years ago

flutter build/run 命令行传参:


flutter build web --release --web-renderer html --base-href /issuer/ --dart-define=GITHUB_API_TOKEN=${{secrets.commit_secret}}  # fix baseHref


flutter run --debug -d chrome --web-renderer html --dart-define=GITHUB_API_TOKEN=${GITHUB_API_TOKEN}

参考 :

github action:

hhstore commented 3 years ago

1

hhstore commented 3 years ago

1