網(wǎng)站地址 網(wǎng)站打開很慢，主要是這只是個1M的小水管而flutter的主項目有1.6M之大大約需要20秒才能下完
簡介
flutter支持web開發(fā)已有一段時間，使用flutter可以輕易開發(fā)出能夠同時以手機app和網(wǎng)頁形式同時存在的應(yīng)用模塊甚至是整個輕量型的應(yīng)用。對于原生開發(fā)人員來說flutter上手難度極低，同時又能在接近0成本的情況下將native開發(fā)的經(jīng)驗用于html中，了解flutter for web將會是十分有用的。
優(yōu)勢與缺陷
? 如簡介中所說 如果你是在設(shè)計一個輕量的app或者是app中的一個就像小程序那樣的獨立功能flutter for web可以讓你用自己的native經(jīng)驗無縫的完成開發(fā)，讓hybrid更為輕松。原生/html一致性讓你即使不能熱更新也可以通過切換為web版在緊急情況下盡可能保證應(yīng)用可用。
? nativeless，使用通用的package 的支持也可以讓你盡量再多端重復(fù)使用組件，并且集成起來相當(dāng)便捷。一如當(dāng)前應(yīng)用構(gòu)建serverless化融合業(yè)務(wù)與前端，使用flutter可以讓我們盡可能地少寫多遍功能相同的前端代碼。
? flutter for web的缺陷也就包含了flutter的全部缺陷 包括 框架不成熟bug多，由于dvm的存在 天然會占用更多的初始內(nèi)存 作為對比
可以看到新浪財經(jīng)在頁面內(nèi)容更多的情況下 實際的內(nèi)存占用是要少上許多的 這主要是由于flutter for web的項目框架需要完整的在js之上運行產(chǎn)生的。這在瀏覽器中劣勢不算明顯，但如果是內(nèi)存寸土寸金的APP中一個視圖棧內(nèi)PUSH多個flutter web頁面也許會讓你的APP迅速崩潰。
而同時由于flutter 的html項目完整的運行在一個js項目中 每一個flutterWeb頁都需要運行它。這意味著如果你是使用html開發(fā)的方式讓多個頁面以多個flutter web項目的方式存在那么每一個這樣的頁面都需要重新下載它的main.js 每個約1.6M 。對于1M的小水管服務(wù)端來說每次打開都要十幾秒著實體驗不好。
環(huán)境
一個最小的靜態(tài)flutter web app只需要配置一臺nginx或者apache并將flutter web頁面復(fù)制到根目錄就行了
安裝服務(wù)器
需要一臺公網(wǎng)服務(wù)器 騰訊CVM最便宜 1核2G 跑個小網(wǎng)頁完全夠了 只是1M的小水管略蛋疼 （懷念免費期也帶寬管飽的AZURE） 所以我這里是 騰訊CVM
因為以前用過APACHE所以一開始我裝了個apache 但是因為我們這個flutter web并不是一個傳統(tǒng)的網(wǎng)站項目，而是更加近似于前后端分離的app端，為了能和手機通用經(jīng)常需要在應(yīng)用中直接訪問遠端，這里nginx配置反向代理更加方便所以換成了nginx，應(yīng)用中只要把網(wǎng)絡(luò)訪問部分獨立出來就可以做到手機與WEB大部分通用了。后面會細說。
購買服務(wù)器后登錄 安裝nginx 教程在這里 我裝了1.18的新版
FlutterWeb環(huán)境
之前寫native的時候我使用的vscode，不過我沒用它開發(fā)web項目。這里android studio調(diào)試方便一些 使用 android studio 。
首先安裝flutter環(huán)境 查看
然后將flutter切換到beta版 并開啟web模式
flutter channel beta
flutter upgrade
flutter config --enable-web
然后直接創(chuàng)建一個新的flutter application就并使用chrome運行就可以看到一個在WEB中運行的flutter樣例了
新的項目中 多了web文件夾并且調(diào)試設(shè)備也變成了chrome 以及chrome server
這里選擇webserver模式并執(zhí)行 好處一是寫了新的代碼只需要重新run并刷新網(wǎng)頁 而不用重啟chrome比較快，二是可以在我們啟動的瀏覽器快捷方式處允許跨域請求
console會給出你服務(wù)器的地址 其實可以在任意瀏覽器中打開 ，但是為了保證兼容性 還是在chrome中打開
你的print此后會在瀏覽器的console中輸出
接下來使用命令
flutter build web
構(gòu)建web工程 然后到build文件夾中找到web文件夾
將web文件夾中的全部內(nèi)容復(fù)制到nginx服務(wù)器的主web路徑下或者放在你想要放的地方并給它指定一個訪問路徑就可以了
講一點nginx配置的問題
先說下前面說要開啟跨域，因為實際部署在服務(wù)器中web app可以通過nginx反向代理訪問外部資源所以調(diào)試的時候相當(dāng)于是訪問跨域資源，所以要開啟瀏覽器的跨域訪問。
而我們也可以通過配置nginx響應(yīng)頭支持跨域請求。
nginx配置的問題有時候不太好搜
root和alias
root會將匹配到的訪問路徑拼接到指定的root路徑之后,因此只能指定實際存在的文件夾路徑或快捷方式
alias可以將訪問連接中匹配到的路徑段轉(zhuǎn)換為另外一道路徑
所以假如說有同類資源要區(qū)分不同路徑訪問的話可以用alias
比如這樣 我把網(wǎng)頁中訪問的jpg資源放在 cosfs/images路徑下 那么我需要配置.jpg匹配路徑root 這樣所有訪問的以.jpg結(jié)尾的資源都會去/cosfs/images下去查找
而此時我又想讓用戶通過/image 的連接也能單獨訪問這個文件夾下的資源。由于實際不存在/image這個文件夾 所以用alias實際將/image/xxx這個路徑轉(zhuǎn)換為/cosfs/images/xxx。
反向代理
解決訪問域外資源問題 ，通過nginx 反向代理通過將域外資源轉(zhuǎn)為域內(nèi)連接即可
這樣 訪問你的服務(wù)器下/klinedata/xxx就相當(dāng)于訪問下面的....../history/xxx
