Jingo

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

Updated at 2024-01-24T17:42:12+08:00

使用tauri将包括umi在内的各种框架开发的网页应用(原生网页也行!), 打包成可在windows上运行的exe可执行文件

tauri 介绍

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

安装 tauri

windows

  1. 安装 rust

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

  2. 在项目中加入 tauri

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

    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 中可以配置开发环境监听的本地端口和开启开发环境之前需要执行的命令(如 umi 项目中通常会执行 pnpm dev 来开启本地开发环境)

    {
      "build": {
        "beforeDevCommand": "pnpm dev",
        "devPath": "http://localhost:8888"
      }
    }
    

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

    pnpm tauri dev
    

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

  4. 打包应用

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

    {
      "build": {
        "beforeBuildCommand": "pnpm build:pack",
        "distDir": "../dist"
      }
    }
    

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

    {
      "package": {
        "productName": "myApp",
        "version": "0.1.0"
      }
    }
    

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

    打包命令

    pnpm tauri build
    

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

  5. 打包时的错误处理

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