手把手教你用 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 应用：

1. 首先，在你的 GUI 框架中创建一个接口，并准备 HTML、CSS 和 JavaScript 以供使用。

2. Tauri Node.js CLI 会对接它并根据你的配置安装 Rust Runner。

3. 在开发模式下，它将创建一个 WebView 窗口，其中包含调试和热模块重载。

4. 在构建模式下，它将设置打包器并根据你的设置创建最终应用。

设置环境

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

• macOS：

https://github.com/tauri-apps/tauri/wiki/03.-MacOS-Setup

• Windows：

https://github.com/tauri-apps/tauri/wiki/04.-MS-Windows-Setup

LINUX 设置

Tauri 的多语言性质意味着它需要许多工具依赖。首先运行以下命令：

$ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev build-essential curl libssl-dev appmenu-gtk3-module

成功完成后，请继续安装 Node.js，因为 Tauri 需要它的运行时：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

这将安装 nvm（Node.js 版本管理器）。安装后，运行此命令以查看 Node.js 版本列表：

nvm ls-remote

在撰写本文时最新版本是 14.1.0，安装它：

nvm install v14.1.0

之后你需要安装 Rust 编译器和 Rust 包管理器：Cargo。

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

运行以下命令确保 Cargo 和 Rust 在 $PATH 中：

rust --version

如果一切顺利，则应该一个返回版本号。根据 Tauri 文档，运行以下命令确保你使用的是最新版本：

$ rustup update stable

剩下的就是安装 tauri-bundler。最好退出 CLI，然后在新的 CLI 窗口中运行以下命令：

$ cargo install tauri-bundler --force

如果一切顺利，你的机器就可以使用 Tauri 了。接下来我们开始集成 Tauri 与 Vue.js。

    Yarn    

Tauri 团队建议安装 Yarn 包管理器：

npm install -g yarn

然后运行以下命令：

yarn --version

如果一切正常，则应该返回一个版本号。

将 Tauri 与 Vue.js 集成

现在我们已经安装了 Tauri，接下来打包一个现有的 Web 项目。你可以在 Netlify 上找到该项目的实时演示。

https://tauri-nota.netlify.app/

fork 这个存储库：

https://github.com/DominusKelvin/nota-web

然后克隆它：

git clone https://github.com/[yourUserName]/nota-web

克隆项目后，运行以下命令安装依赖项：

yarn

然后运行：

yarn serve

你的应用应在 localhost:8080 上运行。杀掉正在运行的服务器，然后为 Tauri 安装 Vue.js CLI 插件。

VUE-CLI-PLUGIN-TAURI

Tauri 团队创建了一个 Vue.js CLI 插件，我们来安装它：

vue add tauri

它将要求你提供窗口标题。只需输入 nota 并按“Enter”即可。我们研究一下 Tauri 插件引入的更改。

Package.json

Tauri 插件在 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.rs
Cargo.lock
Cargo.toml
rustfmt.toml
tauri.conf.json
tauri.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-app
on:
  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 nota for tauri app
        run: yarn build
      — run: cargo install 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:
      — uses: actions/checkout@v2
      — name: setup node
        uses: actions/setup-node@v1
        with:
          node-version: 12
      — name: get version
        run: echo ::set-env name=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
            compressed: ''
    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 (ubuntu only)
        if: matrix.platform == 'ubuntu-latest'
        run: |
          sudo apt-get update
          sudo apt-get install -y webkit2gtk-4.0
      — run: yarn
      — name: build nota for tauri app
        run: yarn build
      — run: cargo install tauri-bundler --force
      — name: build tauri app
        run: yarn tauri:build
      — name: compress (macos only)
        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: upload release asset
        id: upload-release-asset
        uses: actions/upload-release-asset@v1.0.2
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        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 app in debug mode
        run: yarn tauri:build --debug
      — name: compress (macos only)
        if: matrix.platform == 'macos-latest'
        working-directory: ${{ format('./src-tauri/target/debug/{0}', matrix.buildFolder ) }}
        run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }}
      — name: upload release asset with debug mode on
        id: upload-release-asset-debug-mode
        uses: actions/upload-release-asset@v1.0.2
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }}
          asset_path: ${{ format('./src-tauri/target/debug/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }}
          asset_name: ${{ format('nota-debug{0}{1}', matrix.ext, matrix.compressed ) }}
          asset_content_type: application/zip

要测试工作流，请提交更改并将其推送到 fork 的 master 分支。成功推送到 GitHub 后，你可以单击 GitHub 中的“Actions”选项卡，然后单击“Check build”链接以查看工作流的进度。成功执行该动作后，你可以在 GitHub 上存储库页面上的“Release”中查看发行版草稿。然后你就可以发布你的版本了！

    小结    

本文介绍了一种多语言工具链，用于构建安全、跨平台的小体积原生应用。我们已经了解了 Tauri 的概况，以及如何将其与 Vue.js 搭配使用。最后，我们运行 yarn tauri:build 打包了我们的第一个 Tauri 应用，并且我们还使用了 GitHub 动作为 Linux、macOS 和 Windows 创建二进制文件。

有任何疑问，你可以加入 Discord 服务器：

https://discord.gg/SpmNs4S

延伸阅读

https://www.smashingmagazine.com/2020/07/tiny-desktop-apps-tauri-vuejs/