本文首發在微信公眾號Flutter那些事，未經授權，嚴禁轉載。謝謝合作。
今天是一年一度的中秋節，首先在這裡祝願大家中秋團員，闔家歡樂。希望大家吃好喝好玩好。感謝大家這麼長時間一來對本公眾號的大力支援。同時也非常感謝提出寶貴意見的小夥伴們。認識這麼多可愛的小夥伴真的我的榮幸。節日之餘，除了吃好喝好之外，別忘了停止學習，來這裡有最新干貨等著你哦。
在北京時間2019年9月10日的上午，谷歌正式對外公佈了 Flutter1.9版本 ，然後我第一時間就體驗了一把Flutter最新內容，其中也遇到了不少的坑，這裡我寫了一篇部落格專門分享給大家，希望大家可以少走彎路。喜歡的話，就關注一下我的部落格吧。
首先我這裡畫了一張流程圖，放上來讓大家先看看，熟悉一下，幫助大家更快的掌握整個流程。
一、切換分支並升級到最新版本
建議使用master分支。使用 flutter upgrade 命令升級到最新版本。
二、使用命令flutter run -d chrome初次體驗就報錯了。
我新建了一個專案flutter_demo，然後我執行flutter run -d chrome，然而沒反應。
What's the problem？我開啟了谷歌瀏覽器，沒有任何反應。
三、解決方案
步驟1.執行flutter config --enable-web命令，啟動這個預設命令，來實現Flutter Web支援。
如果是windows，命令如下圖所示：
然後會在電腦的 C:\Users\Administrator\AppData\Roaming 路徑生成 flutter_settings 檔案（Administrator是你的電腦名稱）,你可以用文字編輯器開啟，內容是這樣的：
{
"enable-web": true
}
複製程式碼路徑截圖，如下圖所示：
如果是mac，你只需要執行一次
~/.flutter_settings這個命令，如果沒有該檔案會自動建立這個檔案，然後將以下配置複製到flutter_settings檔案即可：
{
"enable-web": true
}
複製程式碼步驟2.執行flutter run -d chrome命令，會自動下載所需要的 Web SDK
步驟3.執行命令 flutter create . （注：千萬別忘了後面的點，這是一個大坑。)
步驟4.這時候再執行flutter run -d chrome即可自動把Flutter程式碼執行在瀏覽器上面了。
以下是瀏覽器截圖：
總結
1.執行flutter config --enable-web命令
2.執行命令 flutter create . （千萬別忘了後面的點，這是一個大坑。）
3.以後建立任何Flutter專案，只需要執行 flutter run -d chrome 命令即可執行在瀏覽器了。
四、生成release版本的web檔案
執行 flutter build web 命令即可把dart檔案編譯成html、js、css檔案，然後就可以部署到網站了。
命令列使用如下所示：
編譯生成的web需要的檔案在專案的根路徑的build/web裡面，如下圖紅色框框所示：
五、部署到網站
（1）部署的時候遇到的坑和解決方案
問題1：部署到網頁怎麼也打不開頁面，一直是空白的，僅僅是本地除錯的時候是可以執行的。
我發現部署到GitHub或者外部網站，怎麼也打不開網頁，後來我看到了在專案的根路徑的build/web裡面，有一個main.dart.js.map的檔案。裡面引入了本地的flutter_web_sdk目錄的相關檔案。然後我就去找對應的檔案所在路徑。
◆ 問題一的解決方案：
找到Flutter安裝路徑(例如：我的是 E:/develop/flutter)，然後開啟裡面的bin/cache/flutter_web_sdk/flutter_web_sdk/，將裡面這層 flutter_web_sdk資料夾的所有內容複製到 專案根目錄/build/web裡面，然後重新執行 flutter build web 即可。（PS：不知道為啥會有兩層同名資料夾？真是坑大了。。）
具體拷貝哪一個目錄，請看下圖：
問題2： FileSystemException: Deletion failed, path = '.dart_tool/build/flutter_web' (OS Error: 目錄不是空的, errno = 145)
◆ 問題二的解決方案：
刪除專案根目錄的.dart_tools檔案，然後重新執行命令 flutter build web 即可。
（三）問題3：Flutter Web不支援元件直接跳轉到外部網頁
Flutter裡面的Button想要跳轉到網頁，我用的是 url_launcher跳轉到外部網頁，如果使用 flutter build web編譯後的頁面在瀏覽器沒任何效果。
我已經給官方提了 issues，官方工作人員表示會盡快支援並完善該功能，還對我的反饋表示感謝。
（2）網站頁面
我們這裡只是演示一個計算器的小功能（程式碼來源於官方的sample），這裡只是把計算器的那個程式碼轉換為一個 Flutter Web功能的演示。
演示頁面: aweiloveandroid.github.io/flutter_dem…
GitHub 首頁: github.com/AweiLoveAnd…
（3）網站頁面示例gif圖形演示
更多精彩乾貨，歡迎關注微信公眾號 Flutter那些事。