1.说明
本文参考官方文档。因为官方文档没有完全汉化,一半中文一半英文看着难受。而且对 vite 和 rust 本身不太熟悉,有时候看官方文档比较费劲,所以就把自己的实操记录下来。
本文采用 Tauri2.0.0.beta 进行创建项目。Rust 版本在 1.75 以上。
2.创建项目
这里采用手动创建项目的方式。
2.1通过 vite 创建前端项目
mkdir tauri-app
cd tauri-app
npm create vite@latest .
控制台会输出如下内容, 在初始化途中会提示用户选择前端框架和语言(第 9 、 10 行),这个前端的同学肯定不陌生。
Need to install the following packages:
create-vite@5.4.0
Ok to proceed? (y) y
> npx
> create-vite .
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript
Scaffolding project in /Users/xxx/WebstormProjects/medzip...
Done. Now run:
npm install
npm run dev
创建完成以后会提示安装依赖以及运行项目,这里我们不着急,因为我们不是要创建前端项目,而是把前端项目作为 Tauri 的一部分。
2.2安装Tauri’s CLI 工具
Tauri CLI是tauri命令行工具,作用在整个Tauri程序的开发周期当中,包括初始化、开发、编译等等。后续会有单独文章讲解Tauri CLI的使用。
npm install -D @tauri-apps/cli@next
2.3初始化 Tauri
npm run tauri开头的命令均来自2.2节中安装的Tauri命令行工具。
npx tauri init
# 或者
npm run tauri init
这一步是初始化 tauri 项目的配置,会出现如下选项,根据实际情况选择
✔ What is your app name? · tauri-app # app 的名称,默认跟第一步创建的文件夹名称一致
✔ What should the window title be? · tauri-app # 应用窗口的名称,默认同上,也可以自定义
? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.co # 默认即可
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../dist # 默认即可
✔ What is the url of your dev server? · http://localhost:5173 # 开发过程中,前端地址
✔ What is your frontend dev command? · npm run dev # 前端启动命令
✔ What is your frontend build command? · npm run build # 前端构建命令
上述是一些项目初始化配置,如果后期需要改动,在tauri.conf.json文件中找到对应项目修改即可。
2.4启动 tauri 项目
npx tauri dev
# 或者
npm run tauri dev
项目启动成功以后,会弹出一个窗口。
3.项目结构
下图是经过上述步骤以后创建的项目结构,其中红色框是通过 vite 生成的 vue3前端代码,绿色框是 tauri 的后端代码,如需开发需要使用 rust 进行开发。
4.打包成可执行程序
执行下面命令:
npx tauri build
等待命令执行完以后查看src-tauri/target/release目录下内容:
如上图所示,总共生成了三个可执行文件。其中最下面的文件是免安装的,双击打开可以直接使用。
4.1 解决安装向导为英文的问题
bundle目录下面的两个可执行文件为软件安装向导。双击以后开始执行安装步骤,但是默认是英文的,如果想要中文页面需要进行额外配置:
"bundle": {
"active": true,
"targets": "all",
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/128x128@2x.png",
"icons/icon.icns",
"icons/icon.ico"
],
"resources": ["bin/"],
"windows": {
// 添加如下代码,控制nsis目录下.exe的安装文件的语言,SimpChinese标识简体中文
"nsis": {
"languages": ["SimpChinese"]
},
// 控制msi目录下.msi的可执行文件安装语言,"zh-CN"表示简体中文。
"wix": {
"language": ["zh-CN"]
}
}
}
重新编译部署
nsis安装页面
msi安装页面
4.2 正式环境显示web 控制台
默认情况下,安装的release版本的程序,右键是不会显示控制台的,但是有时候调试需要,需要加如下内容:
[dependencies]
# 添加devtools以后,编译过的程序,右键也可以看到控制台,否则看不到控制台
tauri = { version = "2.0.0-rc.17", features = ["devtools"] }
5.报错排查
如果在执行npx tauri dev过程中出现下面错误,可能是node版本过低导致的,安装新版本node即可解决。
PS C:\Users\xxx\RustProjects\sharpify> npx tauri dev
Running BeforeDevCommand (`npm run dev`)
> sharpify@0.0.0 dev
> vite
file:///C:/Users/xxx/RustProjects/sharpify/node_modules/vite/dist/node/chunks/dep-B0fRCRkQ.js:4
import fsp, { constants as constants$9 } from 'node:fs/promises';
^^^^^^^^^
SyntaxError: The requested module 'node:fs/promises' does not provide an export named 'constants'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:179:5)
at async Loader.import (node:internal/modules/esm/loader:178:24)
Error The "beforeDevCommand" terminated with a non-zero status code.