🟡使用Tauri构建桌面应用

开发环境

要使用Tauri开发需要先配置一下开发环境

Windows

1.安装Microsoft C++生成工具

Microsoft C++ 生成工具 - Visual Studio

2.安装rustup

Install Rust - Rust Programming Language

下载DOWNLOAD RUSTUP-INIT.EXE (64-BIT)完成后打开.exe文件一路Enter即可

终端使用rustc -V查看是否安装成功

Linux&MacOs

Tauri官网

使用

使用Tauri非常的简单,且不需要对原项目做修改

创建新项目

这里用vite快速创建一个react-ts模板

pnpm create vite my-tauri-app --template react-ts

按照官网提示配置vite.config.ts文件

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
   // 防止 vite 输出复杂的 rust 错误
   clearScreen: false,
   // Tauri 使用固定端口，若此端口不可用将会导致程序错误
   server: {
     strictPort: true,
   },
   // 使用 `TAURI_PLATFORM`、`TAURI_ARCH`、`TAURI_FAMILY`,
   // `TAURI_PLATFORM_VERSION`、`TAURI_PLATFORM_TYPE` 和 `TAURI_DEBUG` 环境变量
   envPrefix: ['VITE_', 'TAURI_'],
   build: {
     // Tauri 支持 es2021
     target: ['es2021', 'chrome100', 'safari13'],
     // 不为调试构建压缩构建体积
     minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
     // 为调试构建生成源代码映射 (sourcemap)
     sourcemap: !!process.env.TAURI_DEBUG,
   },
})

vite@3的默认端口是5173

这里为了强迫症,把它改成3000端口

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
   // 防止 vite 输出复杂的 rust 错误
   clearScreen: false,
   // Tauri 使用固定端口，若此端口不可用将会导致程序错误
   server: {
+    port: 3000,
     strictPort: true,
   },
   // 使用 `TAURI_PLATFORM`、`TAURI_ARCH`、`TAURI_FAMILY`,
   // `TAURI_PLATFORM_VERSION`、`TAURI_PLATFORM_TYPE` 和 `TAURI_DEBUG` 环境变量
   envPrefix: ['VITE_', 'TAURI_'],
   build: {
     // Tauri 支持 es2021
     target: ['es2021', 'chrome100', 'safari13'],
     // 不为调试构建压缩构建体积
     minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
     // 为调试构建生成源代码映射 (sourcemap)
     sourcemap: !!process.env.TAURI_DEBUG,
   },
})

接下来安装一下依赖包

pnpm i
pnpm i @types-node -D     # ts
pnpm i @tauri-apps/cli -D # tauri命令行界面

初始化Tauri

pnpm tauri init

> pnpm tauri init
✔ What is your app name? · my-tauri-app
✔ What should the window title be? · my-tauri-app
? 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) › .
✔ 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:3000

What is your app name设置app名称

What should the window title be设置应用窗口title

Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created设置vite build文件的目录

What is the url of your dev server设置的端口号要和vite调试端口号一致.

以上配置均可在src-tauri/tauri.conf.json文件中修改

Tauri需要在项目启动后才可编译

所以需要先启动项目

pnpm run dev

再开启一个终端来编译Tauri

pnpm tauri dev

第一次执行编译了很多的依赖比较慢,等待完成后就可看到应用窗口了

因为是在dist文件下所以前端项目均可用Tauri来编译为App

对已有项目添加

安装Tauri-CLI

pnpm i @tauri-apps/cli -D

vite.config.ts添加配置

export default defineConfig({
  // ......

	// 防止 vite 输出复杂的 rust 错误
   clearScreen: false,
   // Tauri 使用固定端口，若此端口不可用将会导致程序错误
   server: {
     strictPort: true,
   },
   // 使用 `TAURI_PLATFORM`、`TAURI_ARCH`、`TAURI_FAMILY`,
   // `TAURI_PLATFORM_VERSION`、`TAURI_PLATFORM_TYPE` 和 `TAURI_DEBUG` 环境变量
   envPrefix: ['VITE_', 'TAURI_'],
   build: {
     // Tauri 支持 es2021
     target: ['es2021', 'chrome100', 'safari13'],
     // 不为调试构建压缩构建体积
     minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
     // 为调试构建生成源代码映射 (sourcemap)
     sourcemap: !!process.env.TAURI_DEBUG,
   },

  // ......
})

Tauri初始化

pnpm tauri init

启动项目后开始编译

pnpm run dev

pnpm tauri dev

打包

pnpm tauri build