使用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");
}

结语

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

Author: thinkwei

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注