Tauri
是一款替代Electron的产品。如果使用Electron的话就知道Electron打包体积很大,而Tauri打包体积很小。(当然,Tauri的功能不仅是打包)
Tauri的安装
前提条件
- 已经安装NodeJS
- 已经安装npm
(NPM和NodeJS的安装方法请见百度)
安装
- 下载Visual Studio 2019/2022(2013以上的版本就可以)
Visual Studio 2022下载地址:https://visualstudio.microsoft.com/zh-hans/vs/ -
下载完成后打开vs安装器勾选下面图片中的内容
- 等待安装完毕
- 下载Rust
Rust下载地址(注意系统位数):https://www.rust-lang.org/zh-CN/tools/install - Rust下载完毕后双击exe安装,全程直接默认即可,等待安装完毕。
- Win10及以下系统需要注意
tauri需要WebView2才可以运行而Win10及以下并不会自带WebView2,因此需手动安装(如果你安装了一些软件可能会自动安装WebView2,那么这个时候安装程序会提示已经安装WebView2,此时这一步就可以跳过了):
WebView2安装(选择常青版引导程序即可):https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/ - 在cmd中执行
cargo install tauri-bundler
,如果下载失败,执行cargo install tauri-bundler --force
。(下载速度特慢,建议上网查找cargo的国内镜像源及配置方法)
至此,Tauri已经安装完毕。
Tauri和Vue结合
- 添加插件tauri-cli:
(需要进入到项目中使用这个命令)
等待添加完成vue add tauri
- 添加完成后,会让你一次输入项目名,窗口名等信息,可以先一律默认然后自己修改。等待tauri初始化完毕。重启编译器(如:Webstorm)
- 执行
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"
- 打开
项目路径/src-tauri/tauri.conf.json
文件,将
改成"build": { "beforeBuildCommand": "", "beforeDevCommand": "", "devPath": "http://localhost:8080", "distDir": "../dist" }
(不改会打包错误)"build": { "beforeBuildCommand": "npm run build", "beforeDevCommand": "npm run serve", "devPath": "http://localhost:[项目的端口号]", "distDir": "../dist" }
将"identifier": "com.tauri.dev"
改成"identifier": "com.tauri.build"
(不改会打出空包) - 此时Vue和Tauri整合完毕,可以使用Vue作为前端,Tauri进行打包。
通过tauri:serve
进行运行操作。
第一次打包速度会非常慢,但以后打包就很快了。
(如果运行失败可以执行这个命令试试,若无法解决可以看下面的踩坑)
后续动作
修改项目信息
项目信息配置文件就是前文提到的tauri.conf.json
。这里面记载了项目的一些信息,打包时也会使用这个配置文件。因此,可以在这里对项目的打包做一些配置。
修改msi安装包的语言
默认打包出来的msi是英语的,如果要改成其他语言可以尝试下列方法:
- 在
tauri.conf.json
中的tauri
->bundle
->windows
下添加"wix":{"language": ["en-US","zh-CN"]}
- 重新打包,这样就会生成2个安装包,一个英语,一个简中。所支持的语言代码见下面的链接:https://docs.microsoft.com/en-us/windows/win32/msi/localizing-the-error-and-actiontext-tables
踩坑
-
tauri:serve
无法运行或者运行一段时间后自动结束并报错,提示找不到命令'cargo'
(1). 如果你已经安装了cargo且系统cmd当中可以使用cargo而在使用编译器运行的时候就出现这个问题
解决:重启你的编译器(比如Webstorm必须彻底关闭并重启)
(2). 如果你没有安装cargo ,请安装cargo(安装Rust时自动安装) - 打包时出错,在下载WixTool时报错。
第一次打包的话会下载一个组件包,因为网络问题可能无法下载导致打包失败,可以自己手动下载(速度很快)然后放到C:\User\你的用户名\AppData\Local\tauri\WixTools
目录下,如果没有tauri和WixTools文件夹就创建创建这两个文件夹,(AppData文件夹需要开启“显示隐藏文件”才能看到)需要注意,文件夹的名称是固定的,不能修改!!!
WixTools下载(复制到浏览器可以直接下载,或者将它复制然后粘贴到迅雷下载):https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip - 【2022-8-4更新】使用js中的confirm函数弹出的对话框在tauri打包后无效(“弹出确认框就跳转页面”、“弹出确认框无论点什么都是按照‘确认’处理”等问题都属于这种情况)
Tauri有一套自己对于confirm的实现逻辑(不知道是vue插件tauri-cli导致的还是tauri本身就有一套特殊的机制,本人猜测是vue插件tauri-cli的可能性更大),原先JS的confirm函数返回的是Bool而使用tauri打包后confirm返回的是一个对象,你需要实现then方法才可以让confirm发挥应有的作用。
举例:
未使用tauri时的代码:
使用tauri后就需要这样写:let b=confirm("确定删除吗?") if(b){ ...//当用户点击确认后执行的代码 }
目前不清楚其他框(alert等)的逻辑是否也变了。let b=confirm("确定删除吗?") b.then((res)=>{ if(res){ //当用户点击确认后执行的代码 }else{ //当用户点击取消后执行的代码 } })
评价
从这次经历看来,Tauri和Vue的集成并不是很好,而且和vue的整合有些繁琐,不过做为新起之秀还是值得期待的,因为Tauri打包的体积非常小,我有一个项目用Electron打包是120MB(安装包),用tauri打包就变成7MB(安装包)了,非常的nice。
但它有这么几个缺点:
- 打包时会占用大量的CPU(开一个Idea,运行后台,再开一个Webstorm,然后webstorm开始打包,此时你的电脑卡的跟动画片一样)
- 和Vue的集成十分繁琐
- 生态不够完善
- API文档比较混乱(尤其是“配置文件结构”那部分,特别混乱)