devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：运维做开发 | 2024-06-24 18:36:47

赞

踩

tauri +vue.js

作者 | 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 部分中添加了两个脚本：

  1. "tauri:build": "vue-cli-service tauri:build",
  2. "tauri:serve": "vue-cli-service tauri:serve"

在开发过程中应使用 tauri:serve 脚本。因此让我们运行它：

yarn tauri:serve

这将下载启动我们的应用所需的 Rust crates。之后，它将以 开发模式 启动我们的应用，在该模式下，它将创建一个 WebView 窗口，其中包含 调试 和 热模块重载 。

SRC-TAURI

该插件还在你的应用根目录中添加了一个 src-tauri 目录。此目录中包含 Tauri 用于配置桌面应用的文件和文件夹。检查一下内容：

  1. icons/
  2. src/
  3.     build.rs
  4.     cmd.rs
  5.     main.rs
  6. Cargo.lock
  7. Cargo.toml
  8. rustfmt.toml
  9. tauri.conf.json
  10. 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，并添加下列代码段：

  1. name: release-tauri-app
  2. on:
  3.   push:
  4.     branches:
  5.       - master
  6.     paths:
  7.       - '**/package.json'
  8. jobs:
  9.   check-build:
  10.     runs-on: ubuntu-latest
  11.     timeout-minutes: 30
  12.     steps:
  13.       — uses: actions/checkout@v2
  14.       — name: setup node
  15.         uses: actions/setup-node@v1
  16.         with:
  17.           node-version: 12
  18.       — name: install rust stable
  19.         uses: actions-rs/toolchain@v1
  20.         with:
  21.           toolchain: stable
  22.           profile: minimal
  23.       — name: install webkit2gtk
  24.         run: |
  25.           sudo apt-get update
  26.           sudo apt-get install -y webkit2gtk-4.0
  27.       — run: yarn
  28.       — name: build nota for tauri app
  29.         run: yarn build
  30.       — run: cargo install tauri-bundler --force
  31.       — name: build tauri app
  32.         run: yarn tauri:build
  33.   create-release:
  34.     needs: check-build
  35.     runs-on: ubuntu-latest
  36.     outputs:
  37.       RELEASE_UPLOAD_URL: ${{ steps.create_tauri_release.outputs.upload_url }}
  38.     steps:
  39.       — uses: actions/checkout@v2
  40.       — name: setup node
  41.         uses: actions/setup-node@v1
  42.         with:
  43.           node-version: 12
  44.       — name: get version
  45.         run: echo ::set-env name=PACKAGE_VERSION::$(node -p "require('./package.json').version")
  46.       — name: create release
  47.         id: create_tauri_release
  48.         uses: jbolda/create-release@v1.1.0
  49.         env:
  50.           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  51.         with:
  52.           tag_name: ${{ matrix.package.name }}-v${{ env.PACKAGE_VERSION }}
  53.           release_name: 'Release nota app v${{ env.PACKAGE_VERSION }}'
  54.           body: 'See the assets to download this version and install.'
  55.           draft: true
  56.           prerelease: false
  57.   create-and-upload-assets:
  58.     needs: create-release
  59.     runs-on: ${{ matrix.platform }}
  60.     timeout-minutes: 30
  61.     strategy:
  62.       fail-fast: false
  63.       matrix:
  64.         platform: [ubuntu-latest, macos-latest, windows-latest]
  65.         include:
  66.           — platform: ubuntu-latest
  67.             buildFolder: bundle/deb
  68.             ext: \_0.1.0_amd64.deb
  69.             compressed: ''
  70.           — platform: macos-latest
  71.             buildFolder: bundle/osx
  72.             ext: .app
  73.             compressed: .tgz
  74.           — platform: windows-latest
  75.             buildFolder: ''
  76.             ext: .x64.msi
  77.             compressed: ''
  78.     steps:
  79.       — uses: actions/checkout@v2
  80.       — name: setup node
  81.         uses: actions/setup-node@v1
  82.         with:
  83.           node-version: 12
  84.       — name: install rust stable
  85.         uses: actions-rs/toolchain@v1
  86.         with:
  87.           toolchain: stable
  88.           profile: minimal
  89.       — name: install webkit2gtk (ubuntu only)
  90.         if: matrix.platform == 'ubuntu-latest'
  91.         run: |
  92.           sudo apt-get update
  93.           sudo apt-get install -y webkit2gtk-4.0
  94.       — run: yarn
  95.       — name: build nota for tauri app
  96.         run: yarn build
  97.       — run: cargo install tauri-bundler --force
  98.       — name: build tauri app
  99.         run: yarn tauri:build
  100.       — name: compress (macos only)
  101.         if: matrix.platform == 'macos-latest'
  102.         working-directory: ${{ format('./src-tauri/target/release/{0}', matrix.buildFolder ) }}
  103.         run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }}
  104.       — name: upload release asset
  105.         id: upload-release-asset
  106.         uses: actions/upload-release-asset@v1.0.2
  107.         env:
  108.           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  109.         with:
  110.           upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }}
  111.           asset_path: ${{ format('./src-tauri/target/release/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }}
  112.           asset_name: ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }}
  113.           asset_content_type: application/zip
  114.       — name: build tauri app in debug mode
  115.         run: yarn tauri:build --debug
  116.       — name: compress (macos only)
  117.         if: matrix.platform == 'macos-latest'
  118.         working-directory: ${{ format('./src-tauri/target/debug/{0}', matrix.buildFolder ) }}
  119.         run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }}
  120.       — name: upload release asset with debug mode on
  121.         id: upload-release-asset-debug-mode
  122.         uses: actions/upload-release-asset@v1.0.2
  123.         env:
  124.           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  125.         with:
  126.           upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }}
  127.           asset_path: ${{ format('./src-tauri/target/debug/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }}
  128.           asset_name: ${{ format('nota-debug{0}{1}', matrix.ext, matrix.compressed ) }}
  129.           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/

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/753610
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号