共计 2468 个字符，预计需要花费 7 分钟才能阅读完成。

Umi 4.x 集成 Tauri 快速开发桌面应用

 最近在完成毕设过程中使用到了Tauri来开发桌面应用，前端框架优先考虑使用 React，脚手架选择使用Umi.js。但是全网搜索也没有搜索到 Umi 和 Tauri 集成的博客教程，于是只能参考Tauri官方文档手动集成,并在此做一个记录。

初始化一个 Umi 项目

 这里使用的 Umi 版本是 Umi 4.x，参考 Umi 官方文档，使用npx create-umi@latest命令初始化一个项目：

npx create-umi@latest

 安装依赖后启动：

 在.umirc.ts文件中配置下 Vite

  vite: {
    // 防止 vite 掩盖 rust 错误
    clearScreen: false,
    server: {
      // Tauri 需要一个固定端口，如果该端口不可用则失败
      strictPort: true,
      // 配置一个端口
      port: 8000,
    },
    // 以 `envPrefix` 项开头的环境变量将通过 `import.meta.env` 在 tauri 的源代码中暴露
    envPrefix: ['VITE_', 'TAURI_ENV_*'],
    build: {
      // 前端打包后的所在目录
      outDir: 'dist',
    },
  },

初始化一个 Tauri 项目

 安装tauri cli 工具

npm install -D @tauri-apps/cli@latest

 初始化一个tauri项目：

npx tauri init

 初始化过程中需要输入一些信息：

✔ What is your app name? · umiDemo
✔ What should the window title be? · UmiDemo
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../build
✔ What is the url of your dev server? · http://localhost:8000
✔ What is your frontend dev command? · npm run dev
✔ What is your frontend build command? · npm run build
npm verb exit 0
npm info ok

不知道啥含义的 可以先随便填写，这些配置都在配置文件里，我们后面可以统一修改。

 初始化完成后会生成一个tauri.conf.json配置文件。下面介绍下几个重要的配置信息(包括在命令行输入的配置信息)

• productName: 应用名称
• version: 应用的版本号
• identifier(必须): 采用反向域名表示法的应用程序标识符（例如 com.tauri.example）。此字符串在应用程序中必须是唯一的，因为它用于系统配置，例如捆绑包 ID 和 webview 数据目录的路径。此字符串必须仅包含字母数字字符（A-Z、a-z 和 0-9）、连字符 （-） 和句点 （.）。
• buid：
  • frontendDist: 应用程序资产的路径（通常是 javascript 打包器的 dist 文件夹）或 URL，可以是在 tauri 应用程序中注册的自定义协议（例如：myprotocol://）或远程 URL（例如：https://site.com/app）。
  • devUrl: 要在开发中加载的 URL。这通常是指向开发服务器的 URL，该服务器通过热重载和 HMR 为您的应用程序资产提供服务。大多数现代 JavaScript 打包器（如 vite）默认提供了一种启动开发服务器的方法。如果没有开发服务器或不想使用开发服务器，可以此选项并使用 frontendDist 并指向 Web 资产目录，Tauri CLI 将运行其内置的开发服务器并提供简单的热重载体验。
  • beforeDevCommand:在运行tauri dev 之前的 shell 命令。 通俗点就是：本地开发之前，需要先跑前端。
  • beforeBuildCommand： 在运行tauri build之前的 shell 命令。通俗点就是：应用打包前，先把前端打包出来。

{
  "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
  "productName": "umiDemo",
  "version": "0.1.0",
  "identifier": "com.example.umi.tauri",
  "build": {
    "frontendDist": "../dist",
    "devUrl": "http://localhost:8000",
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build"
  },
  "app": {
    "windows": [
      {
        "title": "UmiDemo",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

添加脚本

 为了便于开发，可以在package.json里添加应用 dev 启动和应用打包的脚本。

  "scripts": {
    "dev": "max dev",
    ...
    "app-dev": "npx tauri dev",
    "app-build": "npx tauri build"
  },

启动/打包 app

 运行npm run app-dev:

 运行npm run app-build:

 打包出来的位置一般在src-tauri/target/release/bundle,不同平台，展示的目录都会有所不同。