为何alert()函数在Tauri应用中无法正常工作？

Tauri默认禁用了浏览器原生的alert()、confirm()、prompt()这类弹窗函数，原因如下：

• Tauri主打原生应用体验，系统原生弹窗比浏览器弹窗更契合应用整体风格
• Tauri提供的原生对话框API支持更多自定义选项，比如设置窗口标题、按钮文本等
• 禁用原生弹窗能避免浏览器环境与Tauri原生环境的行为不一致问题

如果要实现弹窗功能，推荐使用Tauri官方提供的dialog模块，结合你的React场景，示例代码如下：

首先安装依赖（未安装时执行）：

npm install @tauri-apps/api

修改组件代码：

import React from "react";
import ReactDOM from "react-dom/client";
import { alert } from '@tauri-apps/api/dialog';

function Football() {
    const shoot = async () => {
      await alert("Great Shot!");
    }
  
    return (
      <button onClick={shoot}>Take the shot!</button>
    );
  }
  
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

若一定要启用浏览器原生弹窗，可在Tauri配置文件tauri.conf.json中修改security配置：

{
  "tauri": {
    "security": {
      "allowDialogs": true
    }
  }
}

不过这种方式会破坏Tauri的原生体验一致性，不推荐使用。

内容的提问来源于stack exchange，提问作者Sarang Dutta