前要
前两天发现的一个项目 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");
}
结语
经过以上的问题,尝试了数十次后,终于成功触发了弹窗。所以尝鲜是要付出代价的,最后附一张触发成功的截图。🎉
