vue怎么建立桌面（手把手教你用TauriVue）

作者 | 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 aptupdate&& sudo aptinstalllibwebkit2gtk-4.0-devbuild-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 版本列表：

nvmls-remote

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

nvminstallv14.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 窗口中运行以下命令：

$ cargoinstalltauri-bundler--force

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

Yarn

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

npminstall-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

然后运行：

yarnserve

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

VUE-CLI-PLUGIN-TAURI

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

vueaddtauri

它将要求你提供窗口标题。只需输入 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 脚本。因此让我们运行它：

yarntauri: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，只需运行以下命令：

yarntauri: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:installrust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal —name:installwebkit2gtk run: | sudo apt-getupdate sudo apt-getinstall-y webkit2gtk-4.0 — run: yarn —name:buildnotafortauri app run: yarnbuild — run: cargoinstalltauri-bundler--force —name:buildtauri 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:getversion run: echo ::set-envname=PACKAGE_VERSION::$(node -p"require('./package.json').version") —name:createrelease 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:installrust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal —name:installwebkit2gtk (ubuntuonly) if: matrix.platform =='ubuntu-latest' run: | sudo apt-getupdate sudo apt-getinstall-y webkit2gtk-4.0 — run: yarn —name:buildnotafortauri app run: yarnbuild — run: cargoinstalltauri-bundler--force —name:buildtauri app run: yarn tauri:build —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: uploadreleaseasset 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:buildtauri appindebugmode run: yarn tauri:build--debug —name:compress(macosonly) 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: uploadreleaseassetwithdebugmodeon 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/

,