Tauri
是一款替代Electron的產(chǎn)品。如果使用Electron的話就知道Electron打包體積很大，而Tauri打包體積很小。（當(dāng)然，Tauri的功能不僅是打包）
Tauri的安裝
前提條件
- 已經(jīng)安裝NodeJS
- 已經(jīng)安裝npm
（NPM和NodeJS的安裝方法請(qǐng)見百度）
安裝
- 下載Visual Studio 2019/2022（2013以上的版本就可以）
Visual Studio 2022下載地址：https://visualstudio.microsoft.com/zh-hans/vs/ -
下載完成后打開vs安裝器勾選下面圖片中的內(nèi)容
組件安裝 - 等待安裝完畢
- 下載Rust
Rust下載地址（注意系統(tǒng)位數(shù)）：https://www.rust-lang.org/zh-CN/tools/install - Rust下載完畢后雙擊exe安裝，全程直接默認(rèn)即可，等待安裝完畢。
- Win10及以下系統(tǒng)需要注意
tauri需要WebView2才可以運(yùn)行而Win10及以下并不會(huì)自帶WebView2，因此需手動(dòng)安裝（如果你安裝了一些軟件可能會(huì)自動(dòng)安裝WebView2，那么這個(gè)時(shí)候安裝程序會(huì)提示已經(jīng)安裝WebView2，此時(shí)這一步就可以跳過了）：
WebView2安裝（選擇常青版引導(dǎo)程序即可）：https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/ - 在cmd中執(zhí)行
cargo install tauri-bundler，如果下載失敗，執(zhí)行cargo install tauri-bundler --force。（下載速度特慢，建議上網(wǎng)查找cargo的國內(nèi)鏡像源及配置方法）
至此，Tauri已經(jīng)安裝完畢。
Tauri和Vue結(jié)合
- 添加插件tauri-cli：
（需要進(jìn)入到項(xiàng)目中使用這個(gè)命令）
等待添加完成vue add tauri - 添加完成后，會(huì)讓你一次輸入項(xiàng)目名，窗口名等信息，可以先一律默認(rèn)然后自己修改。等待tauri初始化完畢。重啟編譯器（如：Webstorm）
- 執(zhí)行
npm install --save-dev @tauri-apps/cli - 打開package.json，將scripts下面的
"tauri:build": "vue-cli-service tauri:build"改成"tauri:build": "tauri build"將"tauri:serve": "vue-cli-service tauri:serve"改成"tauri:serve": "tauri dev" - 打開
項(xiàng)目路徑/src-tauri/tauri.conf.json文件，將
改成"build": { "beforeBuildCommand": "", "beforeDevCommand": "", "devPath": "http://localhost:8080", "distDir": "../dist" }
（不改會(huì)打包錯(cuò)誤）"build": { "beforeBuildCommand": "npm run build", "beforeDevCommand": "npm run serve", "devPath": "http://localhost:[項(xiàng)目的端口號(hào)]", "distDir": "../dist" }
將"identifier": "com.tauri.dev"改成"identifier": "com.tauri.build"（不改會(huì)打出空包） - 此時(shí)Vue和Tauri整合完畢，可以使用Vue作為前端，Tauri進(jìn)行打包。
通過tauri:serve進(jìn)行運(yùn)行操作。
第一次打包速度會(huì)非常慢，但以后打包就很快了。
（如果運(yùn)行失敗可以執(zhí)行這個(gè)命令試試，若無法解決可以看下面的踩坑）
后續(xù)動(dòng)作
修改項(xiàng)目信息
項(xiàng)目信息配置文件就是前文提到的tauri.conf.json。這里面記載了項(xiàng)目的一些信息，打包時(shí)也會(huì)使用這個(gè)配置文件。因此，可以在這里對(duì)項(xiàng)目的打包做一些配置。
修改msi安裝包的語言
默認(rèn)打包出來的msi是英語的，如果要改成其他語言可以嘗試下列方法：
- 在
tauri.conf.json中的tauri->bundle->windows下添加"wix":{"language": ["en-US","zh-CN"]} - 重新打包，這樣就會(huì)生成2個(gè)安裝包，一個(gè)英語，一個(gè)簡(jiǎn)中。所支持的語言代碼見下面的鏈接：https://docs.microsoft.com/en-us/windows/win32/msi/localizing-the-error-and-actiontext-tables
踩坑
-
tauri:serve無法運(yùn)行或者運(yùn)行一段時(shí)間后自動(dòng)結(jié)束并報(bào)錯(cuò)，提示找不到命令'cargo'
(1). 如果你已經(jīng)安裝了cargo且系統(tǒng)cmd當(dāng)中可以使用cargo而在使用編譯器運(yùn)行的時(shí)候就出現(xiàn)這個(gè)問題
解決：重啟你的編譯器（比如Webstorm必須徹底關(guān)閉并重啟）
(2). 如果你沒有安裝cargo ，請(qǐng)安裝cargo（安裝Rust時(shí)自動(dòng)安裝） - 打包時(shí)出錯(cuò)，在下載WixTool時(shí)報(bào)錯(cuò)。
第一次打包的話會(huì)下載一個(gè)組件包，因?yàn)榫W(wǎng)絡(luò)問題可能無法下載導(dǎo)致打包失敗，可以自己手動(dòng)下載（速度很快）然后放到C:\User\你的用戶名\AppData\Local\tauri\WixTools目錄下，如果沒有tauri和WixTools文件夾就創(chuàng)建創(chuàng)建這兩個(gè)文件夾，（AppData文件夾需要開啟“顯示隱藏文件”才能看到）需要注意，文件夾的名稱是固定的，不能修改?。?！
WixTools下載（復(fù)制到瀏覽器可以直接下載，或者將它復(fù)制然后粘貼到迅雷下載）：https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip - 【2022-8-4更新】使用js中的confirm函數(shù)彈出的對(duì)話框在tauri打包后無效（“彈出確認(rèn)框就跳轉(zhuǎn)頁面”、“彈出確認(rèn)框無論點(diǎn)什么都是按照‘確認(rèn)’處理”等問題都屬于這種情況）
Tauri有一套自己對(duì)于confirm的實(shí)現(xiàn)邏輯（不知道是vue插件tauri-cli導(dǎo)致的還是tauri本身就有一套特殊的機(jī)制，本人猜測(cè)是vue插件tauri-cli的可能性更大），原先JS的confirm函數(shù)返回的是Bool而使用tauri打包后confirm返回的是一個(gè)對(duì)象，你需要實(shí)現(xiàn)then方法才可以讓confirm發(fā)揮應(yīng)有的作用。
舉例：
未使用tauri時(shí)的代碼：
使用tauri后就需要這樣寫：let b=confirm("確定刪除嗎？") if(b){ ...//當(dāng)用戶點(diǎn)擊確認(rèn)后執(zhí)行的代碼 }
目前不清楚其他框（alert等）的邏輯是否也變了。let b=confirm("確定刪除嗎？") b.then((res)=>{ if(res){ //當(dāng)用戶點(diǎn)擊確認(rèn)后執(zhí)行的代碼 }else{ //當(dāng)用戶點(diǎn)擊取消后執(zhí)行的代碼 } })
評(píng)價(jià)
從這次經(jīng)歷看來，Tauri和Vue的集成并不是很好，而且和vue的整合有些繁瑣，不過做為新起之秀還是值得期待的，因?yàn)門auri打包的體積非常小，我有一個(gè)項(xiàng)目用Electron打包是120MB（安裝包），用tauri打包就變成7MB（安裝包）了，非常的nice。
但它有這么幾個(gè)缺點(diǎn)：
- 打包時(shí)會(huì)占用大量的CPU（開一個(gè)Idea，運(yùn)行后臺(tái)，再開一個(gè)Webstorm，然后webstorm開始打包，此時(shí)你的電腦卡的跟動(dòng)畫片一樣）
- 和Vue的集成十分繁瑣
- 生態(tài)不夠完善
- API文檔比較混亂（尤其是“配置文件結(jié)構(gòu)”那部分，特別混亂）
