tauri+vue 开发跨操作系统的桌面应用

最近打算写一个用于股票体检的软件，比如股权质押比过高的股票不买，ROE 小于 10 的股票不买，PE 大于 80 的股票不买等等等等，就像给人做体检一样给股票做个体检。也实现了一些安装技术指标选股相关、实盘买卖点回测功能等等等等。我用 vue 开发了这样一个软件，目前只有我自己在用，许多小伙伴和我说 P:”你把它做成网站呗“。我是想啊，但是原因你知道的各种审批太 XX，我扛不住的。

所以我就想做成一个 PC 端的桌面软件，分给小伙伴们在自己的电脑上安装一下就好了！在 tauri 出现之前，首选肯定是 electron，核心开发语言也就是可以用 js、vue 之类的就能开发桌面应用，我们大家熟知的 visual studio code 就是使用 electron 技术开发的，构建完成之后可以跨端安装。比如：windows、macos、linux 全都支持。但是 electron 开发出来的安装包实在是太大了，动不动几百 MB。有的朋友可能说你看 visual studio code 安装包也才几十 M，但是人家不是微软团队么？个人没那个实力给安装包瘦身。此时 tauri 出现了，electron 有的优点他都有，比如支持使用前端语言开发、支持跨端安装，更重要的是使用 tauri 构建应用安装包一般只有十几 MB，绝了！。那么下面我们就开始第一个 tauri 桌面应用项目吧。

[TOC]

一、准备工作：

以下的准备工作是以在 windows 作为开发操作系统为基础，需要安装的工具。需要注意的是：这些工具时面向开发者的，桌面应用的使用者是不需要安装这些工具的。

1. Microsoft Visual Studio C++ 构建工具

首先需要去安装 Microsoft Visual Studio C++构建工具，下载地址：Build Tools for Visual Studio 2022.。这一个步骤可以说是整个 tauri 开发环境准备最重要的步骤，笔者之前的几乎所有的失败都是因为这一步没有做好。

如果你安装 Microsoft Visual Studio C++构建工具的首页面，不是上面的页面，而是下面的页面，证明你之前就已经安装过“Visual Studio 生成工具"。我强烈建议你把已经安装过的“Visual Studio 生成工具"全都卸载，然后再次安装就会进入上面的这个页面，安装过程一定把上图中红色框框内容全都勾选上。

2. WebView2

下载地址是webview2，下载完成之后按提示傻瓜式安装即可。

tauri 应用是依赖于 webview2 进行显示渲染的，按理来说，用户使用了 tauri 开发的桌面应用，用户所在的操作系统就必须安装 webview2，否则无法显示。但是经过我和我的小伙伴们的实验，我把 webview2 runtime 卸载掉，tauri 开发的桌面应用同样可以运行。这就有点神奇了，我现在还不了解其中的原理，如果有谁知道告诉我一下，不胜感激。总之，不管用户需不需要安装这个 webview2，作为开发者肯定是要安装的。

3. Rust

tauri 底层是基于 rust 语言的，所以开发者需要安装 rust。https://www.rust-lang.org/tools/install，注意勾选实际对应的操作系统位数：32 位、64 位。

建议安装较新的 rust 版本，大于 1.60.0，可以使用runstc -V查看 rust 的版本号。我之前使用的1.60.0版本的时候，tauri 软件构建失败了，如下图。

4.安装 nodejs

因为我们的软件界面核心开发语言仍然是 javascript，所以需要安装 nodejs，要求是 12 以上的版本。如果已经安装过， 使用命令node -v查看一下 nodejs 的版本号

二、新建 tauri 项目

准备工作做好之后，我们使用下面的命令npm create tauri-app新建 tauri 项目。这个命令会给我们若干提示信息，然后根据我们的选项及模板帮助我们新建 tauri 项目。命令执行之后会显示一些 tauri 官网，以及一些构建 tauri 项目的准备工作的网址链接（准备工作我们已经完成了）。提示下面的信息，所以我们只要随便按键盘上的任意键就可以继续构建项目了。

npm create tauri-app…… 这里省略若干行提示信息Press any key to continue...

然后提示我们输入项目名称(app name,会在当前目录下新建一个同名的目录)、windows title(就是 PC 桌面软件左上角的应用名称)。下文中的 stock-check 和"股票体检"是我输入的 app name 和 windows title。

? What is your app name? stock-check? What should the window title be? (Tauri App) 股票体检

然后下一步是选择前端开发（vue）使用的构建工具，我们选择使用 vite。如果对 vite 不了解的同学不用慌，这里我们不用了解 vite 的用法，甚至不用理解 vite 是什么，它只作为构建工具被使用。tauri 桌面应用开发的大多数场景下，你甚至体验不到它的存在。

下一步提示是否安装 tauri-app/api，当然，我们开发的就是 tauri 桌面应用，这个当然要选 Y。

? Add "@tauri-apps/api" npm package? (Y/n) Y

然后提示信息，询问我们使用哪种前端框架进行开发，我选择 vue。如果你对 react 熟练，你也可以选 react。

这一步执行完成之后，就开始项目的代码结构的自动生成工作了，最终显示如下内容，证明我们的项目代码目录生成成功了。

Your installation completed.
$ cd stock-check$ npm run tauri dev

熟悉 vue 前端项目开发的朋友看到这个目录结构是不是额外的亲切，除了 src-tauri 这个目录，其他基本上和 vue 项目结构是一摸一样的。后续我们进行桌面应用开发的时候，也是和开发 vue 项目是一摸一样的。src-tauri 这个目录更多的是在项目构建打包过程中生效，开发过程中很少涉及。

三、开发环境运行项目

在上文新建项目完成，最后输出信息提示我们：

Your installation completed.
$ cd stock-check$ npm run tauri dev

执行cd stock-check进入到项目的目录，执行npm run tauri dev让项目跑起来，跑起来之后可以在浏览器上查看效果，也可以作为 windows 桌面软件查看效果。但是在笔者实验过程中，在进入项目目录之后，在npm run tauri dev之前还需要执行一个命令npm install 引入前端开发所使用的一些 js 依赖模块。桌面端应用运行启动效果如下：

第一次运行构建的过程时间会很长，由于众所周知的原因，可能有些依赖包无法正确安装，需要你事先准备好一些网络的访问能力。

四、项目打包为 msi 安装文件

我们开发一个桌面端的软件，肯定是希望分发出去给用户使用的，所以我们需要打包一个安装文件，比如：aaa.exe、bbb,msi之类的。在 src-tauri 目录下有一个 tauri.conf.json 文件，这个文件是 tauri 工程项目环境的配置文件，在该文件中 JSON 结构的tauri > bundle > identifier默认值是com.tauri.dev,我们需要将它修改一下才能打包，一般修改为你所在组织的域名倒排即可，比如：com.zimug.stock-check。

{ "package": {     "productName": "stock-check",     "version": "0.1.0"  }, "tauri": {    "bundle": {        "identifier": "com.zimug.stock-check",    },  }}

修改完成之后运行打包命令，打包名称版本信息都可以在 tauri.conf.json 文件文件中配置，如上文 package 配置。

npm run tauri build

打包完成之后，会在项目的根目录下的相对路径下生成 msi 安装文件src-tauri\target\release\bundle/msi/stock-check_0.1.0_x64_en-US.msi，把这个 msi 文件分发给你的用户，他们就可以在 PC 端安装使用你开发的 windows 桌面软件啦。当然 tauri 和 electron 一样的是可以跨平台的，也可以打包兼容 windows、MacOS、Linux 的桌面应用安装包。

五、小问题

有的小伙伴可能会问，我要想使用 tauri 开发桌面端应用是不是需要学习 rust 语言啊？答案是：不需要！ 除非你开发那种和 windows 硬件强关联的桌面应用，比如蓝牙、驱动之类的，否则不需要你有任何的 rust 语言基础。你的开发工作大部分就是写界面，写逻辑数据交互，和开发 web 应用是一样的！