🟡使用Tauri构建桌面应用

本文最后更新于:2022年9月2日 晚上

开发环境

要使用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非常的简单,且不需要对原项目做修改

创建新项目

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

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

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

vite.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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端口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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,
},
})

接下来安装一下依赖包

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

初始化Tauri

1
pnpm tauri init
1
2
3
4
5
6
> 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需要在项目启动后才可编译

所以需要先启动项目

1
pnpm run dev

再开启一个终端来编译Tauri

1
pnpm tauri dev

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

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

对已有项目添加

安装Tauri-CLI

1
pnpm i @tauri-apps/cli -D

vite.config.ts添加配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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初始化

1
pnpm tauri init

启动项目后开始编译

1
pnpm run dev
1
pnpm tauri dev

打包

1
pnpm tauri build

🟡使用Tauri构建桌面应用
https://qingshaner.com/使用Tauri构建桌面应用/
作者
清山
发布于
2022年8月16日
许可协议