Flutter Web的配置 啟動 打包

2021-09-24 15:56:23 字數 2408 閱讀 3368

flutter web目前還是預覽版,還有些不是跟移動端那麼成熟,小翼在這裡經過自己的努力除錯了一下。廢話不多說,直接擼碼:

flutter web配置:

1、首先fluttersdk的版本要1.5.4及以上,dartsdk版本要2.3.0及以上。

git clone -b beta

配置環境也是一樣的。這裡就不說了

2、配置dartsdk環境:在fluttersdk裡面的..flutter\bin\cache\dart-sdk;

安裝 dart 和 flutter 外掛程式

我們要給 idea 安裝 dart 和 flutter 外掛程式。安裝完成後就可以開始我們的 flutter web之旅了。

新建乙個 flutter web 專案

安裝完成dart 和 flutter 環境後,重啟 idea後就可以快速的搭建乙個 flutter web 專案。

接著安裝 webdev 工具,在idea中選擇命令視窗,執行下面的命令。

將路徑 $home/.pub-cache/bin 新增到環境變數中。

設定完成後在終端輸入 webdev 看看是否成功

坑:在一些終端上執行該命令會提示該命令不存在,比如 cmd,fluent。

配置成功後就可以開始下一步了。

執行專案

首先確保 idea 將所需要的依賴正常安裝完成。

在idea終端輸入 webdev serve,當編譯完成後,開啟 http://localhost:8080, 如圖,顯示出 hello world

最後說明:

專案結構

專案已經執行,簡單的看一下專案主要結構

.dart_tool 是專案打包執行編譯生成的檔案

lib 是我們主要要寫的專案**和原有的 flutter 基本一致

web 包含乙個 html 檔案和乙個 main.dart

index.html 引用了 web/main.dart 編譯生成的 js 檔案

而 web/main.dart 呼叫了 lib/main.dart,我們寫**基本就可以修改lib目錄下的**進行執行。

與 flutter 的不同

預設包名不同,

載入的預設ui包名不同,原flutter 的包為 import 'package:flutter/material.dart' 而 web 專案為 import 'package:flutter_web/material.dart' 多了乙個 _web。

圖示顯示問題

在 web 專案上的圖示無法顯示。

專案不報錯,idea的側邊欄也顯示該圖示,但是在頁面上卻無法顯示

3、打包

如果你想檢視release版本,可以執行

flutter pub global run webdev serve -r

如果你想發布製品,則可以執行

flutter pub global run webdev build

這會在專案的根路徑下生成乙個build資料夾,裡面包含可以部署到伺服器上的檔案,如下圖所示:

其他簡單的體驗後,基本可以用flutter開發頁面,目前來說還是有一些問題的,比如說上述的圖示載入問題,而且如果將移動端的**複製過來,除了包名要有修改外,很多第三方包還是對 web 不支援。編譯速度也沒有移動端那樣快,相較於傳統的web開發,編譯速度也是乙個問題。

MongoDB啟動配置

1,常用引數說明 dbpath mongodb資料檔案儲存路徑 logpath mongod的日誌路徑 bind ip 繫結的ip port 繫結的埠 2,啟動方式 a,直接啟動 進入mongodb安裝目錄,例如 mongodb linux x86 64 3.0.4 執行.bin mongod db...

Codis FE配置啟動

生成配置資訊 codis admin dashboard list zookeeper 192.168.84.128 2181 tee conf codis.json如果當前目錄下還沒有建立logs資料夾,請先建立logs資料夾。後台啟動fe nohup codis fe ncpu 2 log lo...

memcached配置 啟動

memcached libevent wget 安裝libevent tar zxvf libevent 2.0.21 stable.tar.gz cd libevent 2.0.21 stable configure prefix opt libevent make make install 測試...