JINGO

Jingo's Blog

0%

用tauri将前端页面打包成桌面应用

Posted on Edited on In
详细介绍如何使用tauri将web前端项目打包为一个桌面APP

tauri 介绍

Tauri 是一款使用 rust 开发的应用构建工具包, 让你能够为使用 Web 技术的所有主流桌面操作系统构建软件

安装 tauri

windows

  1. 安装 rust

    前往https://www.rust-lang.org/zh-CN/tools/install下载并安装 rust 运行环境

  2. 在项目中加入 tauri

    安装 tauri cli 工具, 并执行创建命令

    1
    2
    3
    pnpm add -D @tauri-apps/cli

    pnpm tauri init

    接下来 tauri 会向你提出几个问题, 回答之后会在你的项目根目录加入一个 src-tauri 文件夹, 其中包含了 tauri 的核心运行代码和配置文件, 比较关键的文件如下:

    • Cargo.toml

      Cargo 清单, 声明了当前应用依赖的 rust 包和元数据等内容

    • tauri.conf.json

      项目构建配置文件, 可高度自定义 tauri 应用的各方面, 可参考Tauri 的 API 配置

    • src/main.rs

      rust 程序入口, 其中的 main 函数就是运行时的入口函数

  3. 开发环境

    在 tauri.conf.json 中可以配置开发环境监听的本地端口和开启开发环境之前需要执行的命令(如一些项目中通常会执行 pnpm dev 来开启本地开发环境)

    1
    2
    3
    4
    5
    6
    {
      "build": {
        "beforeDevCommand": "pnpm dev",
        "devPath": "http://localhost:8888"
      }
    }

    执行上述步骤后, 现在你可以执行以下命令来开启开发环境

    1
    pnpm tauri dev

    执行完毕后会打开一个窗口, 此时就能看到你的前端界面了

  4. 打包应用

    打包之前需要先进行一些配置, 比如配置构建应用之前需要执行的打包操作, 以及打包好的文件输出的目录:

    1
    2
    3
    4
    5
    6
    {
      "build": {
        "beforeBuildCommand": "pnpm build:pack",
        "distDir": "../dist"
      }
    }

    应用打包后的名称和版本:

    1
    2
    3
    4
    5
    6
    {
      "package": {
        "productName": "myApp",
        "version": "0.1.0"
      }
    }

    以及窗口相关的配置, 具体配置可参考Tauri 的 API 配置

    打包命令

    1
    pnpm tauri build

    打包成功后可以在项目中的 src-tauri/target/release 目录中找到应用的可执行文件

  5. 打包时的错误处理

    墙内使用 tauri 打包时可能会遇到一些 github 上的资源下载失败的问题