（Tauri）js 导入不起作用：“无法解析模块说明符”

Question

我遇到了 Tauri 插件的问题（我使用的是 Tauri 1.2.2）。 我已经创建了一个基本的应用程序

npx create-tauri-app

使用 npm 作为其包管理器。

除了我尝试使用 Tauri 的 Plugin-Log 插件之外，我已将所有内容保留为安装方式。 (https://github.com/tauri-apps/tauri-plugin-log)

要安装它，我添加了

tauri-plugin-log = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }

在

src-tauri/Cargo.toml

，然后跑

npm add https://github.com/tauri-apps/tauri-plugin-log

然后我更新了

main()

中的

src-tauri/src/main.rs

函数：

use tauri_plugin_log::{LogTarget};
fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_log::Builder::default().targets([
            LogTarget::LogDir,
            LogTarget::Stdout,
            LogTarget::Webview,
        ]).build())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

但是，当我尝试导入任何内容时（下面的代码行写在里面

main.js

）：

import { trace, info, error, attachConsole } from "tauri-plugin-log-api";

我收到以下错误：

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

即使直接从文档中导入，例如这个，也会失败：

import { ask } from '@tauri-apps/api/dialog';
const yes = await ask('Are you sure?', 'Tauri');

并产生相同的

TypeError

：

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

尽管我已将以下内容添加到

tauri.conf.json

{
  "tauri": {
    "allowlist": {
      "dialog": {
        "all": true,
        "open": true,
        "save": true
      },
      ...
    }
  }
}

我发现的上述问题的唯一解决方法是：

const { ask } = window.__TAURI__.dialog;
const yes = await ask('Are you sure?', 'Tauri');

最终成功了。

不幸的是，我在尝试使用本文前面描述的插件日志时仍然不知所措。 我尝试使用相对路径，即

import { trace, info, error, attachConsole } from "../node_modules/tauri-plugin-log-api/dist-js/index.min.js";

但随后出现了新的错误：

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.

我什至尝试在安装完所有内容后在新的虚拟机中重现该问题，但最终遇到了相同的错误。

我可能遗漏了什么吗？请耐心听我说，因为我是一个名副其实的金牛座菜鸟。 预先感谢您的回复。

Answer 1

使用安装为普通 JS/CSS/HTML 的 Tauri，使用来自“@tauri-apps/api”的“导入”声明时，我也遇到了同样的错误。

我发现的唯一修复是将我的 HTML/JS/CSS 代码复制到 Tauri 的 [vanilla-ts] 版本中，它可以按预期工作。

Answer 2

文档未更新，但您只是缺少：

yarn add -D @tauri-apps/api 

Answer 3

我明白了，你是这样写的

import { isPermissionGranted } from '@tauri-apps/api/notification'

尝试这样写。它为我解决了

const { isPermissionGranted } = window.__TAURI__.notification; 

用 .notification 替换 api/notification。