flutter支持跨平台，可以將同一套代碼用很小的代價打包成ios,android,pc,mac,web
打包出來的web項目基本和iOS或者Android項目一模一樣，如果有第三方plugin不支持web,請盡量使用最新版本plugin，目前打包了幾個已有項目，發現大部分日常開發的第三方插件基本都支持
打包的web項目在使用webView的時候需要注意，目前好像大部分主流webview插件都不支持web端使用webview，如果一定要使用，可以使用以下方案：
1.url_lanuch插件，這個插件默認可以打開瀏覽器，在網頁端，將會新開一個頁面打開輸入的頁面
2.HtmlElementView，這個是web插件，支持html和url加載，似乎有很多限制，使用可以參考一下兩篇文章
3.easy_web_view親測有效打開速度流暢 支持多端打開webview、html、markdown
這里介紹如何將一個現有flutter項目打包成web項目
1.開啟web功能支持
flutter config --enable-web
2.flutter doctor查看是否能看到chrome瀏覽器相關信息[前提是已經安裝了chrome]
3.如果無查看到chrome，請切換分支到master或者dev
查看分支
chenhao@chenhaodeMacBook-Pro ~ % flutter channel
Flutter channels:
master
dev
beta
* stable
切換分支
chenhao@chenhaodeMacBook-Pro ~ % flutter channel master
Switching to flutter channel 'master'...
git: From https://github.com/flutter/flutter
git: + 198df796aa...022b333a08 beta -> origin/beta (forced update)
git: * [new branch] fix_existing_dds_attach_retry -> origin/fix_existing_dds_attach_retry
git: c6290500f8..a76289bb1b master -> origin/master
git: Switched to a new branch 'master'
git: Branch 'master' set up to track remote branch 'master' from 'origin'.
Successfully switched to flutter channel 'master'.
To ensure that you're on the latest build from this channel, run 'flutter
upgrade'
執行--version開始下載master分支內容
chenhao@chenhaodeMacBook-Pro ~ % flutter --version
Downloading Dart SDK from Flutter engine a0da844845f54b82e1dabef14fe96d50938ee489...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 178M 100 178M 0 0 9396k 0 0:00:19 0:00:19 --:--:-- 10.2M
Building flutter tool...
Flutter 1.24.0-8.0.pre.319 • channel master •
https://github.com/flutter/flutter.git
Framework • revision a76289bb1b (52 minutes ago) • 2020-11-19 16:49:05 -0800
Engine • revision a0da844845
Tools • Dart 2.12.0 (build 2.12.0-50.0.dev)
執行doctor查看直到出現Chrome - develop for the web
chenhao@chenhaodeMacBook-Pro ~ % flutter doctor
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure
you trust this source!
Downloading package sky_engine... 970ms
Downloading flutter_patched_sdk tools... 3.4s
Downloading flutter_patched_sdk_product tools... 6.5s
Downloading darwin-x64 tools... 11.0s
Downloading darwin-x64/font-subset tools... 494ms
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.24.0-8.0.pre.319, on macOS 11.0.1 20B29
darwin-x64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.51.1)
[✓] Connected device (2 available)
! Error: iPhoneZ is not connected. Xcode will continue when iPhoneZ is
connected. (code -13)
• No issues found!
4.打開已有項目進入到根目錄，執行flutter create .開始創建web目錄文件，執行完畢后，在項目中多了個一個web目錄
web
├── favicon.png
├── icons
│ ├── Icon-192.png
│ └── Icon-512.png
├── index.html
└── manifest.json
5.執行命令在chrome上運行,可以看到項目在瀏覽器中打開，並且支持熱更新
flutter run -d chrome
6.打包web項目,打包完成后在build中找打web打包目錄
flutter build web
tree web
目錄結構
build/web
├── assets
│ ├── AssetManifest.json
│ ├── FontManifest.json
│ ├── NOTICES
│ ├── assets
│ │ ├── assets
│ │ │ ├── 2x
│ │ │ ├── 3x
│ │ │ └── tabbar
│ │ │ ├── 2x
│ │ │ └── 3x
│ │ ├── fonts
│ │ └── packages
│ │ └── cupertino_icons
│ │ └── assets
├── favicon.png
├── flutter_service_worker.js
├── icons
│ ├── Icon-192.png
│ └── Icon-512.png
├── index.html
├── main.dart.js
├── manifest.json
└── version.json
7.部署項目 我這邊是將靜態文件部署到github.io上，地址 點擊打開 https://qqcc1388.github.io/2020/flutter/web/index.html
由於github訪問速度比較慢，如果無法打開，請見諒
8.將原有項目打包成web項目要注意一些庫是否支持web端，如果不支持，會報錯，所以打包后，需要每個頁面都點一下