tauri + vue 初探

1. 前言

最近公司准备做桌面端项目，准备使用 tauri 构建一个桌面版本软件，于是稍微研究了一下搭建一个基础框架。

2. 环境准备

nodejs 这个就不用说了，需要注意的是需要选择新版本的 nodejs，不然会有兼容性问题

安装 Microsoft Visual Studio C++ 生成工具

下载 Visual Studio 2022 生成工具

这里默认勾选的，点击安装即可

安装WebView2

这个直接从微软网站下载和运行安装即可，一般 windows 已经默认安装过了。

Rust

最后前往 www.rust-lang.org/zh-CN/tools… 来安装 rustup (Rust 安装程序)。

tauri 主进程是使用 rust 来编写的，我们的软件需要和 rust 脚本进行交互

3. 初始化项目

执行

npm create tauri-app@latest

选择好自己项目偏好就完成项目初始化了。接下来介绍一下项目的目录结构, 基本目录结构和 vue 差不多，只是多了一个 src-tauri 目录

接下来主要看看 src-tauri 目录

4. 项目启动

启动网页版本

npm run vite

启动桌面版本

npm run tauri dev

5. 桌面端加载页面

首先在根目录下新建 loading.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	应用 初始化 中....
</body>
</html>

2. 修改 vite.config.js，变成多入口的配置

export default defineConfig(async () => ({  
    plugins: [vue()],
    server: {  
        port: 1420,  
        strictPort: true,  
        watch: {  
            // 3. tell vite to ignore watching `src-tauri`  
            ignored: ["**/src-tauri/**"],  
        },  
    }, 
    // 新增 build 配置
    build: {  
        rollupOptions: {  
            input: {  
                index: './index.html',  
                loading: './loading.html'  
            }  
        }  
    }  
}));

修改 src-tauri/tauri.conf.json 中的 windows 配置

"windows": [
      {
        "title": "index",
        "width": 800,
        "height": 600,
        "url": "/",
        "visible": false,
        "transparent": false,
        "decorations": true
      },
      {
        "title": "loading",
        "width": 400,
        "height": 300,
        "decorations": true,
        "transparent": false,
        "url": "loading.html",
        "label": "loading"
      }
]

这里包含对每个窗口的自定义配置，比如是否透明: transparent, 窗口宽高 width、height 等等。具体配置参考窗口配置

注意这里把窗口 index 的 visible 设置为了 false 隐藏起来了，需要在页面加载完成后再展示这个页面

修改 src-tauri/src/main.ts, 新增展示窗口的 rust 脚本

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
// 引入依赖
use tauri::{Manager, Window};
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

// 这里新增加载完成脚本，注意脚本需要用 #[tauri::command] 注释 方法和函数需要以下划线分割
#[tauri::command]
async fn loding_finish(window: Window) {
  // 关闭加载页面
  window.get_window("loading").expect("no window labeled 'splashscreen' found").close().unwrap();
  // 展示主界面
  window.get_window("main").expect("no window labeled 'main' found").show().unwrap();
} 

fn main() {
    tauri::Builder::default()
        // 这里需要注册 loding_finish 函数
        .invoke_handler(tauri::generate_handler![greet, loding_finish])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

最后修改 src/App.vue，在主界面加载完成后，展示主界面

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Greet from "./components/Greet.vue";
import { invoke } from "@tauri-apps/api/tauri";
import { onMounted } from "vue";

onMounted(() => {
  setTimeout(() => {
    invoke('loding_finish')
  }, 2000)
})

</script>

启动时可以看到应用初始化中... 界面

6. 结语

总的来说试用下来和 electron 体验差不多，感觉各方面配置可能相对来说要更加简单易用一点。编译后的包也非常小只有 5M 左右大小，不会像 electron 最少都是 70M 的包了。不过就是主程序使用的 rust 增加了学习成本