使用Tauri v2 alpha版本开发桌面应用遇到的问题

前要

前两天发现的一个项目 Niva ，是基于 Tauri 使用了 Tauri 的跨端窗口管理库 tao 和跨端 Webview 库 wry。感兴趣的可以了解下：简介 | Niva (bramblex.github.io)，不过作者好像半年多没有维护了。

在 Windows 下 Niva 表现很好，而且几乎没有什么环境配置问题，看文档花几个小时就能使用前端技术撸一个工具出来。后来切到 macOS 下发现有文件读写的问题，权限问题目前没有得到解决方案。所以今天花了点时间迁移到 Tauri 上，于是就有了上一篇文章。

本篇文章来写下jeeinn博主，迁移到 Tauri v2 alpha 版并使用弹窗插件时遇到的一些问题。

问题

1、import 导入问题

由于小工具使用了传统的前端原始架构 HTML + CSS + JavaScript，但使用 Tauri 大多是以 import 方式更优雅。使用 window.__TAURI__.dialog 这样的形式有点儿不习惯，但直接在本地 html 文件中的 script 标签引入ES6的模块，使用 import 会有以下错误：

Uncaught SyntaxError: Cannot use import statement outside a module

需要给 script 标签指定类型

<script type="module" src="./index.js"></script>

2、错误继续

官方无框架默认目录结构

|--project
   |--src
      |--index.js
      |--index.html
   |--src-tauri
   |--package.json

由于使用官方 demo ，自带无框架项目层级问题，再次运行项目有如下错误

Uncaught TypeError: Failed to resolve module specifier "@tauri-apps/plugin-dialog". Relative references must start with either "/", "./", or "../".

修改插件引入路径之后，运行再次报错。如下：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

好了，这次是 tauri 自带的服务端返回信息的问题。这下不得不为了一点现代化的使用方式付出点代价了，不过为了之后更好打包，索性使用 vite 来管理前端。

3、使用 vite 来管理前端

由于现在是 v2 alpha版，官方文档没有编写。但好在可以参考 v1文档，整体过程如下：

pnpm create vite
✔ Project name: vite-project
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

安装 beta 版 tauri-cli

pnpm add -D @tauri-apps/cli@next
pnpm add @tauri-apps/plugin-dialog

再根据官网v1，直接修改 src-tauri/tauri.conf.json，主要是 build 相关配置

  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devPath": "http://localhost:5173/",
    "distDir": "../dist",
    "withGlobalTauri": true
  },

命令 pnpm tauri dev 启动，完美。

4、弹窗插件

但是触发弹窗时又有新问题：

Uncaught (in promise) "plugin dialog not found"

这个问题，我想到了大概可能是 插件白名单 问题？

查了下 issue ，嚯，alpha 版不支持 wihtelist #7112 。白名单格式还在草案中……

好在查到了该如何使用插件：#7542 ，当然插件主页也写着如何使用：tauri-plugin-dialog

记得提前安装前端的交互依赖

pnpm add @tauri-apps/plugin-dialog

修改文件，添加插件

# src-tauri/Cargo.toml
[dependencies]
tauri-plugin-dialog = "2.0.0-alpha"

# src-tauri/src/main.rs
fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_dialog::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

结语

经过以上的问题，尝试了数十次后，终于成功触发了弹窗。所以尝鲜是要付出代价的，最后附一张触发成功的截图。🎉