10 分钟把你的 Web 应用转为桌面端应用-Toy模板网

这篇具有很好参考价值的文章主要介绍了10 分钟把你的 Web 应用转为桌面端应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在桌面端应用上，Electron 也早已做大做强，GitHub桌面端、VSCode、Figma、Notion、飞书、剪映、得物都基于此。但最近后起之秀的 Tauri 也引人注目，它解决了 Electron 一个大的痛点——打包产物特别大。

我们知道 Electron 基于谷歌内核 Chromium 构建，打包后无论应用多小，至少都得 70M 起步，而 Tauri 使用操作系统内的 Webview¹，运行时才会去动态连接 webview，这使得它的打包速度非常快、打包后的应用更小。

Tauri 跟 Electron 一点不同，Electron 使用 JavaScript 编写后台服务，而 Tauri 则使用 Rust，Rust 这两年势头很猛，更安全、性能更好，很多应用都开始转入 Rust 的怀抱，相信不久后也会是前端必学基础。

本文就基于 Tauri 作为构建桌面端应用框架，仅需一点时间，就可以将一个 Web 应用转为桌面端应用。

我们以 FocusTide 这个应用为转换对象，它是 GitHub 开源的一个计时 Web 应用：

10 分钟把你的 Web 应用转为桌面端应用

首先我们先 Clone 该仓库到本地：

$ git clone git@github.com:Hanziness/FocusTide.git

然后我们安装并且运行起来：

# 安装依赖
$ yarn install

# 启动服务，在 localhost:3000
$ yarn dev

我们以 Mac 为例，Mac 下需要安装 CLang 和 MacOS 相关开发依赖：

$ xcode-select --install

安装 Tauri：

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

这条命令会安装下载 Rustup，它会下载安装 Rust 相关依赖，当安装成功后控制台会显示：

$ Rust is installed now. Great!

其他操作系统安装 Tauri：

Windows 下安装 Tauri：https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites/#windows
Linux 下安装 Tauri：https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites/#linux

在 Web 应用内，先安装 Tauri 相关的 npm 包

$ npm install --save-dev @tauri-apps/cli

在 pakcage.json 增加脚本命令：

"scripts": {
  "tauri": "tauri"
}

接着跑 Tauri 初始化项目命令：

$ npm run tauri init

这条命令执行之后，会在当前 Web 项目产生如下 Tauri 项目：

10 分钟把你的 Web 应用转为桌面端应用

执行之后，会有一些问题需要我们去填写

10 分钟把你的 Web 应用转为桌面端应用

What is your app name?
应用名。这个名字会作为打包后应用的正式名称。
What should the window title be?
默认窗口名称。这个会作为我们打开应用窗口的名称，后续我们不需要这个窗口的话我们可以在 tauri.conf.json 的 hiddenTitle 字段去隐藏它。
Where are your web assets (HTML/CSS/JS) located relative to the /src-tauri/tauri.conf.json file that will be created?
生产环境下的文件路径。也就是前端项目打包之后的项目路径，这个路径相对于 /src-tauri/tauri.conf.json 路径。FocusTide 项目打包产物放在项目的 dist 文件夹中，所以我们填 ..dist。
What is the URL of your dev server?
开发环境下的服务路径。FocusTide 项目开发下的服务路径为 http://localhost:3000。
What is your frontend dev command?
前端启动开发命令。FocusTide 项目启动开发命令是 yarn dev。
What is your frontend build command?
前端打包命令。FocusTide 项目的打包命令是 yarn generate。

执行后，生成 src-tauri，接着我们就可以把项目跑起来了：

$ npm run tauri dev

可以看到，我们的应用在窗口跑起来了：

10 分钟把你的 Web 应用转为桌面端应用

如果开发 OK，我们就可以把应用打包出来。

$ npm run tauri build

执行打包命令后，打包应用会存放在 src-tauri/target/release/bundle 下，可以看到，打包产物非常小：

10 分钟把你的 Web 应用转为桌面端应用

Tauri 打包过程中，会更根据当前系统平台打包，比如 Mac 下只能打包 .dmg 和 .app 包，Windows 下打包 .msi 和 .exe 包。

下载后，如果我们要公开这个应用，需要部署应用，这里我们推荐 Laf ，我们可以使用它的云存储#文件管理，把我们的应用上传上去并且得到下载链接：

10 分钟把你的 Web 应用转为桌面端应用

整个转换过程其实非常简单快速，如果你花费了超过 10 分钟的话，那我们深表歉意。如果你要继续深入使用桌面后台服务，可以查看 Tauri 官网。

最后，我把转换后的 FocusTide 项目放到了个人 GitHub 上，并且取名为「来做」，目前仅限 Mac 端，欢迎下载 👏🏻

Tauri vs. Electron: A comparison, how-to, and migration guide: https://blog.logrocket.com/tauri-electron-comparison-migration-guide/ ↩︎文章来源地址https://www.toymoban.com/news/detail-419822.html

到了这里，关于10 分钟把你的 Web 应用转为桌面端应用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！