Tauri初步使用

Tauri

是一款替代Electron的产品。如果使用Electron的话就知道Electron打包体积很大，而Tauri打包体积很小。（当然，Tauri的功能不仅是打包）

Tauri的安装

前提条件

1. 已经安装NodeJS
2. 已经安装npm
   （NPM和NodeJS的安装方法请见百度）

安装

1. 下载Visual Studio 2019/2022（2013以上的版本就可以）
   Visual Studio 2022下载地址：https://visualstudio.microsoft.com/zh-hans/vs/

2. 下载完成后打开vs安装器勾选下面图片中的内容

   
   
   组件安装
3. 等待安装完毕
4. 下载Rust
   Rust下载地址（注意系统位数）：https://www.rust-lang.org/zh-CN/tools/install
5. Rust下载完毕后双击exe安装，全程直接默认即可，等待安装完毕。
6. Win10及以下系统需要注意
   tauri需要WebView2才可以运行而Win10及以下并不会自带WebView2，因此需手动安装（如果你安装了一些软件可能会自动安装WebView2，那么这个时候安装程序会提示已经安装WebView2，此时这一步就可以跳过了）：
   WebView2安装（选择常青版引导程序即可）：https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/
7. 在cmd中执行cargo install tauri-bundler，如果下载失败，执行cargo install tauri-bundler --force。（下载速度特慢，建议上网查找cargo的国内镜像源及配置方法）

至此，Tauri已经安装完毕。

Tauri和Vue结合

1. 添加插件tauri-cli：
   （需要进入到项目中使用这个命令）

   vue add tauri
   

   等待添加完成
2. 添加完成后，会让你一次输入项目名，窗口名等信息，可以先一律默认然后自己修改。等待tauri初始化完毕。重启编译器（如：Webstorm）
3. 执行npm install --save-dev @tauri-apps/cli
4. 打开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"
5. 打开项目路径/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"（不改会打出空包）
6. 此时Vue和Tauri整合完毕，可以使用Vue作为前端，Tauri进行打包。

通过tauri:serve进行运行操作。
第一次打包速度会非常慢，但以后打包就很快了。
（如果运行失败可以执行这个命令试试，若无法解决可以看下面的踩坑）

后续动作

修改项目信息

项目信息配置文件就是前文提到的tauri.conf.json。这里面记载了项目的一些信息，打包时也会使用这个配置文件。因此，可以在这里对项目的打包做一些配置。

修改msi安装包的语言

默认打包出来的msi是英语的，如果要改成其他语言可以尝试下列方法：

1. 在tauri.conf.json中的tauri->bundle->windows下添加"wix":{"language": ["en-US","zh-CN"]}
2. 重新打包，这样就会生成2个安装包，一个英语，一个简中。所支持的语言代码见下面的链接：https://docs.microsoft.com/en-us/windows/win32/msi/localizing-the-error-and-actiontext-tables

踩坑

1. tauri:serve无法运行或者运行一段时间后自动结束并报错，提示找不到命令'cargo'
   (1). 如果你已经安装了cargo且系统cmd当中可以使用cargo而在使用编译器运行的时候就出现这个问题
   解决：重启你的编译器（比如Webstorm必须彻底关闭并重启）
   (2). 如果你没有安装cargo ，请安装cargo（安装Rust时自动安装）
2. 打包时出错，在下载WixTool时报错。
   第一次打包的话会下载一个组件包，因为网络问题可能无法下载导致打包失败，可以自己手动下载（速度很快）然后放到C:\User\你的用户名\AppData\Local\tauri\WixTools目录下，如果没有tauri和WixTools文件夹就创建创建这两个文件夹，（AppData文件夹需要开启“显示隐藏文件”才能看到）需要注意，文件夹的名称是固定的，不能修改！！！
   WixTools下载（复制到浏览器可以直接下载，或者将它复制然后粘贴到迅雷下载）：https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip
3. 【2022-8-4更新】使用js中的confirm函数弹出的对话框在tauri打包后无效（“弹出确认框就跳转页面”、“弹出确认框无论点什么都是按照‘确认’处理”等问题都属于这种情况）
   Tauri有一套自己对于confirm的实现逻辑（不知道是vue插件tauri-cli导致的还是tauri本身就有一套特殊的机制，本人猜测是vue插件tauri-cli的可能性更大），原先JS的confirm函数返回的是Bool而使用tauri打包后confirm返回的是一个对象，你需要实现then方法才可以让confirm发挥应有的作用。
   举例：
   未使用tauri时的代码：

   let b=confirm("确定删除吗？")
   if(b){
     ...//当用户点击确认后执行的代码
   }
   

   使用tauri后就需要这样写：

   let b=confirm("确定删除吗？")
   b.then((res)=>{
     if(res){
       //当用户点击确认后执行的代码
     }else{
       //当用户点击取消后执行的代码
     }
   })
   

   目前不清楚其他框（alert等）的逻辑是否也变了。

评价

从这次经历看来，Tauri和Vue的集成并不是很好，而且和vue的整合有些繁琐，不过做为新起之秀还是值得期待的，因为Tauri打包的体积非常小，我有一个项目用Electron打包是120MB（安装包），用tauri打包就变成7MB（安装包）了，非常的nice。
但它有这么几个缺点：

1. 打包时会占用大量的CPU（开一个Idea，运行后台，再开一个Webstorm，然后webstorm开始打包，此时你的电脑卡的跟动画片一样）
2. 和Vue的集成十分繁琐
3. 生态不够完善
4. API文档比较混乱（尤其是“配置文件结构”那部分，特别混乱）