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

最新推荐文章于 2024-06-21 23:55:00 发布

悲伤日记

最新推荐文章于 2024-06-21 23:55:00 发布

阅读量1.8w

点赞数 1

文章标签： java css github js web

作者 | 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：

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