手把手教你用Tauri+Vue创建小型桌面应用

作者 | Kelvin Omereshone译者 | 王强策划 | 李俊辰作为 Electron 的替代方案之一，Tauri 可通过已有的 HTML、CSS 和 JavaScript 创建小型、快速且安全的桌面应用。在这篇文章中，作者演示了如何使用 Tauri 和 Vue 两种技术，将一个名为 nota 的示例应用打包为原生应用。什么是 TAURI？Tauri 的官网是这样介绍的：

• Tauri 是一个多语言工具链，可使用小型和快速的二进制文件构建安全的原生应用。所谓“多语言”，是指 Tauri 可使用多种编程语言，包括 Rust、JavaScript 和 TypeScript，将来还会支持 Go、C++ 和 Python 等。
  
• 它让你可以使用任何基于 HTML 和 JavaScript 的前端框架（例如 Vue.js、React 或 Angular）来构建原生桌面应用，并且可以将其集成到任何管道中。
  
• 它可以帮助你为主要的桌面平台（即将推出移动和 WebAssembly 支持）构建和打包二进制文件。
  

在其 GitHub 页面上，Tauri 称自己是与框架无关的工具链，用于构建高度安全的原生应用，这些应用体积小巧，速度飞快（内存占用很低）。
为什么不用 Electron？Electron 是使用 Web 技术构建桌面应用的流行工具。
但是，Electron 应用包的体积较大，运行时往往会占用大量内存。Tauri 与 Electron 对比如下：

• 包体积：Tauri 应用的体积可以小于 600KB。
  
• 内存占用：Tauri 应用的内存占用不到 Electron 应用的一半。
  
• 许可证：Tauri 可以进行再授权，而 Electron 则不能。Electron 自带 Chromium，但 Chromium 包含一个名为 Widevine 的数字版权管理系统。这使得使用 Electron 创建的应用受到了 PureOS 之类的平台用户的抵制，因为它不是免费 / 自由开源软件（FLOSS）。PureOS 等平台已通过自由软件基金会（FSF）的验证。这意味着他们只能在其应用商店中发布免费和开源软件。
  

简而言之，如果你的应用是使用 Electron 构建的，则它永远无法在 PureOS 商店中正式发售。
Tauri 的更多特性

• 用 Tauri 创建的应用一开始就是高度安全的。
  
• Tauri 兼容任何前端框架，因此你无需改变技术栈。
  
• 它有许多设计模式，可通过简单的配置选择重要的特性。
  

Tauri 的优点

• Tauri 让你可以直接把 Web 应用的代码库转换为原生桌面应用。
  
• 尽管你可以在基于 Tauri 的项目中使用 Rust，但这完全是可选的。如果这样做的话，你不需要在针对 Web 的原始代码库中进行任何更改。
  

Tauri 的实践应用Vue.js 核心团队成员 Guillaume Chau 最近创建了 guijs，意思是“JavaScript 项目的图形用户界面”。它是 Tauri 支持的原生桌面应用，能够以可视方式管理你的 JavaScript 项目。
Guijs 是 Tauri 的一个示例，也证明 Tauri 与 Vue.js 配合得很好。感兴趣的话请查看 GitHub 上的 guijs 存储库。而且它是开源的。
Tauri 的工作机制Tauri 使用 Node.js 来构建 HTML、CSS 和 JavaScript 渲染窗口，并将其作为用户界面（UI），由 Rust 管理和引导。它是单体二进制文件，可以作为 Linux（deb/appimage）、macOS（app/dmg）和 Windows（exe/msi）的常见文件类型分发。
构建 Tauri 应用通过以下步骤创建 Tauri 应用：

• 首先，在你的 GUI 框架中创建一个接口，并准备 HTML、CSS 和 JavaScript 以供使用。
  
• Tauri Node.js CLI 会对接它并根据你的配置安装 Rust Runner。
  
• 在开发模式下，它将创建一个 WebView 窗口，其中包含调试和热模块重载。
  
• 在构建模式下，它将设置打包器并根据你的设置创建最终应用。
  

设置环境注意：下面将介绍如何在 Linux 环境下进行配置。macOS 和 Windows 的指南请看下方链接。

• macOS：
  

• Windows：
  

LINUX 设置Tauri 的多语言性质意味着它需要许多工具依赖。首先运行以下命令：$ sudo aptupdate && sudo aptinstall libwebkit2gtk-4.0-devbuild-essential curl libssl-dev appmenu-gtk3-module成功完成后，请继续安装 Node.js，因为 Tauri 需要它的运行时：curl -o- http://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash这将安装 nvm（Node.js 版本管理器）。安装后，运行此命令以查看 Node.js 版本列表：nvmls-remote在撰写本文时最新版本是 14.1.0，安装它：nvm install v14.1.0之后你需要安装 Rust 编译器和 Rust 包管理器：Cargo。$ curl --proto'=https' --tlsv1.2 -sSf http://sh.rustup.rs |sh运行以下命令确保 Cargo 和 Rust 在 $PATH 中：rust--version如果一切顺利，则应该一个返回版本号。根据 Tauri 文档，运行以下命令确保你使用的是最新版本：$ rustup update stable剩下的就是安装 tauri-bundler。最好退出 CLI，然后在新的 CLI 窗口中运行以下命令：$ cargoinstall tauri-bundler--force如果一切顺利，你的机器就可以使用 Tauri 了。接下来我们开始集成 Tauri 与 Vue.js。
Yarn Tauri 团队建议安装 Yarn 包管理器：npminstall -g yarn然后运行以下命令：
yarn--version如果一切正常，则应该返回一个版本号。
将 Tauri 与 Vue.js 集成现在我们已经安装了 Tauri，接下来打包一个现有的 Web 项目。你可以在 Netlify 上找到该项目的实时演示。
fork 这个存储库：
然后克隆它：git clone http://github.com/[yourUserName]/nota-web克隆项目后，运行以下命令安装依赖项：yarn然后运行：yarn serve你的应用应在 localhost:8080 上运行。杀掉正在运行的服务器，然后为 Tauri 安装 Vue.js CLI 插件。
VUE-CLI-PLUGIN-TAURITauri 团队创建了一个 Vue.js CLI 插件，我们来安装它：vueadd tauri它将要求你提供窗口标题。只需输入 nota 并按“Enter”即可。我们研究一下 Tauri 插件引入的更改。
Package.jsonTauri 插件在 package.json 文件的 scripts 部分中添加了两个脚本："tauri:build":"vue-cli-service tauri:build","tauri:serve":"vue-cli-service tauri:serve"在开发过程中应使用 tauri:serve 脚本。因此让我们运行它：yarn tauri:serve这将下载启动我们的应用所需的 Rust crates。之后，它将以开发模式启动我们的应用，在该模式下，它将创建一个 WebView 窗口，其中包含调试和热模块重载。
SRC-TAURI该插件还在你的应用根目录中添加了一个 src-tauri 目录。此目录中包含 Tauri 用于配置桌面应用的文件和文件夹。检查一下内容：icons/src/ build.rs cmd.rs main.rsCargo.lockCargo.tomlrustfmt.tomltauri.conf.jsontauri.js我们唯一需要做的更改是在 src-tauri/Cargo.toml 中。Cargo.toml 类似于 Rust 的 package.json 文件。在 Cargo.toml 中找到以下行：name ="app"改成这样：name ="nota"搞定！
打包 要为当前平台打包 nota，只需运行以下命令：yarn tauri:build注意：与开发窗口一样，第一次运行这条命令时，将需要一些时间来收集 Rust crates 并构建所有内容。在随后的运行中，只需要重建 Tauri crates 即可。
完成上述操作后，你应该有了当前操作系统使用的 nota 二进制文件。我这边在 src-tauri/target/release/bundle/deb/ 目录中创建了一个.deb 二进制文件。
跨平台 你可能已经注意到，yarn tauri:build 命令刚刚为你的操作系统生成了一个二进制文件。因此，让我们为其他操作系统生成对应的二进制文件。为此我们将在 GitHub 上设置一个工作流。我们在这里使用 GitHub 作为跨平台应用的分发媒体。因此，你的用户只需在项目的“Release”选项卡中下载二进制文件即可。我们将实现的工作流会通过 GitHub actions 的功能自动为我们构建二进制文件。
创建 Tauri 工作流感谢 JacobBolda，我们有了一个工作流，可以通过 GitHub 上的 Tauri 自动创建和发布跨平台应用。除了为各种平台（Linux、macOS 和 Windows）构建二进制文件外，该动作还将为你上传二进制文件作为 GitHub 上的发行版。它还使用了 Jacob 制作的 Createa Release 动作。
要使用此工作流，请在 nota-web 的根目录中创建一个.github 目录。在此目录中，创建另一个名为 workflows 的目录。然后，我们将在.github/workflows/ 中创建一个工作流文件，并将其命名为 release-tauri-app.yml。
在 release-tauri-app.yml 中，我们将添加一个工作流，该工作流为 Linux、macOS 和 Windows 构建二进制文件。此工作流还将二进制文件作为草稿版本上传到 GitHub。每当我们推送到主服务器时，工作流就会被触发。
打开 release-tauri-app.yml，并添加下列代码段：name:release-tauri-appon: push: branches: -master paths: -'**/package.json'jobs: check-build: runs-on: ubuntu-latest timeout-minutes:30 steps: — uses: actions/checkout@v2 —name: setup node uses: actions/setup-node@v1 with: node-version:12 —name:install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal —name:install webkit2gtk run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn —name:build notafor tauri app run: yarnbuild — run: cargoinstall tauri-bundler--force —name:build tauri app run: yarn tauri:build create-release: needs:check-build runs-on: ubuntu-latest outputs: RELEASE_UPLOAD_URL: ${{ steps.create_tauri_release.outputs.upload_url }} steps:—name: setup nodewith: node-version:12 —name:get version run: echo ::set-envname=PACKAGE_VERSION::$(node -p"require('./package.json').version") —name:create release id: create_tauri_release uses: jbolda/create-release@v1.1.0 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ matrix.package.name }}-v${{ env.PACKAGE_VERSION }} release_name:'Release nota app v${{ env.PACKAGE_VERSION }}' body:'See the assets to download this version and install.' draft:true prerelease:false create-and-upload-assets: needs:create-release runs-on: ${{ matrix.platform }} timeout-minutes:30 strategy: fail-fast:false matrix: platform: [ubuntu-latest, macos-latest, windows-latest] include: — platform: ubuntu-latest buildFolder: bundle/deb ext: \_0.1.0_amd64.deb compressed:'' — platform: macos-latest buildFolder: bundle/osx ext: .app compressed: .tgz — platform: windows-latest buildFolder:'' ext: .x64.msi'' steps:—name: setup nodewith: node-version:12 —name:install rust stablewith:—name:install webkit2gtk (ubuntuonly) if: matrix.platform =='ubuntu-latest' run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn —name:build notafor tauri app run: yarnbuild — run: cargoinstall tauri-bundler--force —name:build tauri appbuild —name:compress (macosonly) if: matrix.platform =='macos-latest' working-directory: ${{format('./src-tauri/target/release/{0}', matrix.buildFolder ) }} run: tar -czf ${{format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{format('nota{0}', matrix.ext ) }} —name: uploadrelease asset id: upload-release-asset uses: actions/upload-release-asset@v1.0.2 env:with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{format('./src-tauri/target/release/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{format('nota{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip —name:build tauri appin debugmodebuild --debug —name:compress (macosonly) if: matrix.platform =='macos-latest' working-directory: ${{format('./src-tauri/target/debug/{0}'format('nota{0}{1}'format('nota{0}', matrix.ext ) }} —name: uploadrelease assetwith debugmode on id: upload-release-asset-debug-moderelease-asset@v1.0.2 env:with:format('./src-tauri/target/debug/{0}/nota{1}{2}'format('nota-debug{0}{1}'要测试工作流，请提交更改并将其推送到 fork 的 master 分支。成功推送到 GitHub 后，你可以单击 GitHub 中的“Actions”选项卡，然后单击“Check build”链接以查看工作流的进度。成功执行该动作后，你可以在 GitHub 上存储库页面上的“Release”中查看发行版草稿。然后你就可以发布你的版本了！
小结 本文介绍了一种多语言工具链，用于构建安全、跨平台的小体积原生应用。我们已经了解了 Tauri 的概况，以及如何将其与 Vue.js 搭配使用。最后，我们运行 yarn tauri:build 打包了我们的第一个 Tauri 应用，并且我们还使用了 GitHub 动作为 Linux、macOS 和 Windows 创建二进制文件。
有任何疑问，你可以加入 Discord 服务器：
延伸阅读