从0到1创建一个基于Vue和Yarn的Tauri的应用程序并打包为Windows安装程序

客官°小女子只卖身不卖艺 2023-10-04 22:24 10阅读 0赞

这个逻辑是完全按照官网一步一步来的，所以你也可以按照官网的教程来：[指南 | Tauri Apps][_ Tauri Apps]

## 预先准备 ##

### 安装 ###

首先您需要安装 [Rust][] 及其他系统依赖。 请记住，只有在开发 *Tauri 应用*时才需要此设置。 您程序的用户不需要进行下列操作。

#### Windows ####

1. Microsoft Visual Studio C++ 生成工具

您需要安装 Microsoft C++ 生成工具。 最简单的方法是下载 [Visual Studio 2022 生成工具][Visual Studio 2022]。 进行安装选择时，请勾选 "C++ 生成工具" 和 Windows 10 SDK。

2. WebView2

备注

On Windows 10 (Version 1803 and later with all updates applied) and Windows 11, the Webview2 runtime is distributed as part of the operating system.

Tauri 需要 WebView2 才能在 Windows 上呈现网页内容，所以您必须先安装 WebView2。 最简单的方法是从[微软网站][Link 1]下载和运行常青版引导程序。

安装脚本会自动为您下载适合您架构的版本。 不过，如果您遇到问题 (特别是 Windows on ARM)，您可以自己手动选择正确版本。

3. Rust

最后，请前往 [https://www.rust-lang.org/zh-CN/tools/install][https_www.rust-lang.org_zh-CN_tools_install] 来安装 `rustup` (Rust 安装程序)。 请注意，为了使更改生效，您必须重新启动终端，在某些情况下需要重新启动 Windows 本身。

或者，您可以在 PowerShell 中使用 `winget` 命令安装程序：

winget install --id Rustlang.Rustup

MSVC TOOLCHAIN AS DEFAULT

For full support for Tauri and tools like [trunk][] make sure the MSVC Rust toolchain is the selected `default host triple` in the installer dialog. Depending on your system it should be either `x86_64-pc-windows-msvc`, `i686-pc-windows-msvc`, or `aarch64-pc-windows-msvc`.

If you already have Rust installed, you can make sure the correct toolchain is installed by running this command:

rustup default stable-msvc

#### macOS ####

1. CLang 和 macOS 开发依赖项

您将需要安装 CLang 和 macOS 开发依赖项。 为此，您需要在终端中执行以下命令：

xcode-select --install

2. Rust

要在 macOS 上安装 Rust，请打开终端并输入以下命令：

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

备注

我们已审计了此 Bash 脚本，它只做了该做的事情。 但是，您最好在复制粘贴运行脚本之前，看看其源代码。 这是它的源代码：[rustup.sh][]

此命令将下载以上脚本并开始安装用来安装最新版 Rust 的 `rustup` 工具。 您可能需要输入密码。 若安装成功，终端将显示以下内容：

Rust is installed now. Great!

请确保重新启动终端以使更改生效。

#### Linux ####

1. 系统依赖

您需要安装几个系统依赖，如 C 语言编译器和 `webkit2gtk`。 下方是适用于部分热门发行版的安装命令：

*  Debian
 *  Arch
 *  Fedora
 *  openSUSE
 *  NixOS

sudo apt update
    sudo apt install libwebkit2gtk-4.0-dev \
        build-essential \
        curl \
        wget \
        libssl-dev \
        libgtk-3-dev \
        libayatana-appindicator3-dev \
        librsvg2-dev

2. Rust

要在 Linux 上安装 Rust，请打开终端并输入以下命令：

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

备注

我们已审计了此 Bash 脚本，它只做了该做的事情。 但是，您最好在复制粘贴运行脚本之前，看看其源代码。 这是它的源代码：[rustup.sh][]

此命令将下载以上脚本并开始安装用来安装最新版 Rust 的 `rustup` 工具。 您可能需要输入密码。 若安装成功，终端将显示以下内容：

Rust is installed now. Great!

请确保重新启动终端以使更改生效。

### 管理 Rust 安装 ###

你应该保持更新你的 Rust 版本，以便使用最新改进。 若要更新 Rust，请打开终端并运行以下命令：

rustup update

`rustup` 也可以从您的计算机上完全卸载 Rust：

rustup self uninstall

### 故障排查 ###

要检查您是否正确安装了 Rust，请打开终端并运行如下命令：

rustc --version

您应该能看到以下列格式呈现的版本号、提交哈希及提交日期：

rustc x.y.z (abcabcabc yyyy-mm-dd)

## 使用Vue和Yarn构建一个项目 ##

在cmd或者powershell中执行：

yarn create tauri-app

应该会报一个错误：

> $ tauri build  
> Error You must change the bundle identifier in \`tauri.conf.json > tauri > bundle > identifier\`. The default value \`com.tauri.dev\` is not allowed as it must be unique across applications
> 
> 意思是：
> 
> 错误您必须更改\`tauri.conf.json>tauri>bundle>identifier\`中的包标识符。不允许使用默认值“com.tauri.dev”，因为它在应用程序中必须是唯一的

![2d58044d56a64f46b591eb97e2ae1c51.png][]

这个标识就相当于程序的唯一ID一样，不能重复，所以需要自己修改：原来的是"identifier": "com.tauri.dev"，改成自己的就好

![433d593243e54f5fb9869955055f9bca.png][]

然后再次执行：就没有错误了

![170f317f2cfb4a74a6daeabc800779d3.png][]

等显示Finished 1 bundle at的时候，说明已经好了：![79b74aa3edac4aac847b6d1145b6607c.png][]

这里就是安装程序的路径：打开路径就看到了安装程序，才2.2M，真TM惊喜啊

![3c7e8ff2a9044d99bc3cee1570e3dce1.png][]

双击即可安装，也可以选择安装目录：![e2697095a58a46bfadb9941665e10204.png][]

回到桌面，就可以看到一个快捷打开方式：

![40b7237b339e43168c581d4c7598b530.png][]

双击即可打开：

![024c3f1c2fcf4486846835dcdd8c4cc7.png][]

到此就说明，一切结束，非常Good

[_ Tauri Apps]: https://tauri.app/zh-cn/v1/guides/
[Rust]: https://www.rust-lang.org/
[Visual Studio 2022]: https://visualstudio.microsoft.com/visual-cpp-build-tools/
[Link 1]: https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/#download-section
[https_www.rust-lang.org_zh-CN_tools_install]: https://www.rust-lang.org/tools/install
[trunk]: https://trunkrs.dev/
[rustup.sh]: https://sh.rustup.rs/
[2d58044d56a64f46b591eb97e2ae1c51.png]: https://img-blog.csdnimg.cn/2d58044d56a64f46b591eb97e2ae1c51.png
[433d593243e54f5fb9869955055f9bca.png]: https://img-blog.csdnimg.cn/433d593243e54f5fb9869955055f9bca.png
[170f317f2cfb4a74a6daeabc800779d3.png]: https://img-blog.csdnimg.cn/170f317f2cfb4a74a6daeabc800779d3.png
[79b74aa3edac4aac847b6d1145b6607c.png]: https://img-blog.csdnimg.cn/79b74aa3edac4aac847b6d1145b6607c.png
[3c7e8ff2a9044d99bc3cee1570e3dce1.png]: https://img-blog.csdnimg.cn/3c7e8ff2a9044d99bc3cee1570e3dce1.png
[e2697095a58a46bfadb9941665e10204.png]: https://img-blog.csdnimg.cn/e2697095a58a46bfadb9941665e10204.png
[40b7237b339e43168c581d4c7598b530.png]: https://img-blog.csdnimg.cn/40b7237b339e43168c581d4c7598b530.png
[024c3f1c2fcf4486846835dcdd8c4cc7.png]: https://img-blog.csdnimg.cn/024c3f1c2fcf4486846835dcdd8c4cc7.png