使用 Vite+Vue3 创建 Tauri2.0 项目

2,199 阅读4分钟

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 进行开发。

image.png

4.打包成可执行程序

执行下面命令:

npx tauri build

等待命令执行完以后查看src-tauri/target/release目录下内容:

image.png

如上图所示,总共生成了三个可执行文件。其中最下面的文件是免安装的,双击打开可以直接使用。

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安装页面 image.png

msi安装页面

image.png

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.