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时的代码：
```
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。
但它有这么几个缺点：

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