flutter移動項目遷移flutter_web準備階段脫坑
前言
從2018年Google推出flutter後就很受歡迎，於是自己就嘗試設運用一下將公司的一個項目使用flutter進行部分功能實現，效果還是不錯的，流暢度還是個人感覺還是可以接受的；這邊GoogleI/O2019發佈Flutter web版本後，當然還沒有提供正式版SDK，想要對之前的項目做web端適配還有些工作要是，最近工作沒有那麼忙了於是自己就打算嘗試將之前的flutter項目遷移到web端，由於不完善這中間走了不少彎路。
準備
開始前先看官方文檔：https://github.com/flutter/flutter_web
文檔明確指出目前的flutter_web處於實驗階段，使用了單獨的命名空間，就是我們目前提供的sdk移動和web段是分開的，需要對已有的移動項目改造才能在web平臺運行，並且文檔指出我們的建議我們是1.5.4以上版本來進行web端的支持
開始遷移
1.安裝webdev包 使用如下命令進行:
flutter pub global activate webdev
使用該命令的前提是我們已經配置了flutter環境變量（環境變量配置路徑爲“fluttersdk安裝路徑\flutter\bin”，‘fluttersdk安裝路徑’根據自己安裝請況定）
2.修改原有項目中的引用，官網文檔提供的配置如下（並移除asset和字體相關的配置）：
name: my_flutter_web_app
environment:
sdk: '>=2.2.0 <3.0.0'
dependencies:
flutter_web: any
flutter_web_ui: any
dev_dependencies:
build_runner: ^1.1.2
build_web_compilers: ^1.0.0
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
3.提供web端配置：
根目錄添加web文件夾並在其中創建index.html與main.dart文件
index.html文件內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
main.dart文件內容如下：
import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:flutter_app2/main.dart' as app;
main() async {
await ui.webOnlyInitializePlatform();
app.main();
}
配置完了可以看效果了高興，運行flutter packages get命令獲依賴包
Could not find a file named "./pubspec.yaml" in https://github.com/flutter/flutter_web
pub get failed (1)
pub get failed (69) -- attempting retry 1 in 1 second...
Cannot open file, path = 'C:\Users\Administrator\AppData\Roaming\Pub\Cache\git\flutter_web-8d4c12a4e9b45f82b5cb862840ac47445e136f7b\.git/pub-packages' (OS Error: 系統找不到指定的路徑。
, errno = 3)
pub get failed (66)
悲劇…發生了各種報錯，查閱許多資料問題是一個變着花樣地出就是不能正常運行起來,花費我一早上沒有解決問題,百度一番有的說是殺毒軟件問題，有的說是網絡問題，有的說是git環境問題反正各種嘗試不能用，靈機一動flutter_web不是有examples嗎clone一下看看他們怎麼樣，結果examples項目可以正常運行起來，咱們看一下examples項目的配置
dependency_overrides:
flutter_web:
path: ../../packages/flutter_web
flutter_web_ui:
path: ../../packages/flutter_web_ui
examples使用的本地依賴包，那我能包自己項目的修改爲本地依賴包嗎？動手試一下：
修改前：
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
flutter_web_test:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_test
修改後：
dependency_overrides:
flutter_web:
path: E:/developTools/flutter_web_sdk/flutter_web/packages/flutter_web
flutter_web_ui:
path: E:/developTools/flutter_web_sdk/flutter_web/packages/flutter_web_ui
flutter_web_test:
path: E:/developTools/flutter_web_sdk/flutter_web/packages/flutter_web_test
“E:/developTools/flutter_web_sdk/flutter_web”爲flutter_web SDK放置路徑
再使用flutter packages get命令等待一會兒，沒有報錯效果如下：
項目沒有問題了，啓動服務執行如下命令：
flutter pub global run webdev serve --auto restart
如下提示表示啓動成功：
[INFO] Registering build targets...?[2K
[INFO] Starting initial build...?[2K
[INFO] Starting resource servers...?[2K
[INFO] Serving `web` on http://127.0.0.1:8080
?[2K
[INFO] About to build [web]...?[2K
[INFO] Running build...?[2K
[INFO] Running build completed, took 312ms
?[2K
[INFO] Caching finalized dependency graph...?[2K
[INFO] Caching finalized dependency graph completed, took 203ms
?[2K
[INFO] Succeeded after 522ms with 0 outputs (0 actions)
?[2K
其中“http://127.0.0.1:8080”爲項目訪問地址通過瀏覽器就可以訪問
如何發佈項目可以查看：Flutter全平臺！遷移現有Flutter項目到WEB端
項目改造完會發布到git並提供鏈接