Tauri前端开发中JavaScript使用import导入模块报错如何解决

• 未指定type="module"时，浏览器默认按传统脚本解析JS，不支持ES6 import语法，直接触发语法错误
• 加type="module"后的MIME类型错误，是因为直接导入了node_modules下的TypeScript源文件，这类文件未经过编译，浏览器无法直接识别，且相对路径不符合ES模块导入规范
• 导入JS文件仍报错，通常是导入路径未补全后缀、或对应文件本身包含未编译的模块语法，没有被正确处理

方案1：使用标准构建流程（推荐） #

• 首先确认已执行yarn add @tauri-apps/api完成依赖安装
• 给项目增加轻量化构建工具处理模块打包，比如Vite、Parcel，零配置即可适配Tauri的前端构建要求：
  以Vite为例，在项目根目录执行yarn create vite . --template vanilla，将现有前端代码迁移到自动生成的src目录下即可
• 此时在script.js中直接使用以下导入语句即可，不需要写完整的node_modules路径：

import { appWindow } from "@tauri-apps/api/window"

// open方法为异步调用，需添加await处理
const childWin = await appWindow.open("new.html")

• 保留HTML中script标签的type="module"属性，Tauri启动时会自动调用构建后的产物，不需要手动处理路径映射

方案2：无构建工具临时方案 #

如果不需要使用模块系统，可以直接调用Tauri的全局UMD包：

• 从node_modules/@tauri-apps/api/umd目录下复制tauri-api.min.js到项目的静态资源目录
• 在主HTML文件中优先引入该脚本：

<script src="./你的静态资源目录/tauri-api.min.js"></script>

• 不需要写任何import语句，直接在script.js中调用全局变量即可：

const { appWindow } = window.__TAURI__
const childWin = await appWindow.open("new.html")

• 该方案不需要给script.js添加type="module"属性

额外注意事项 #

• 需在tauri.conf.json的tauri > allowlist > window配置项中，将open权限设置为true，否则新窗口无法正常弹出
• 所有Tauri API的异步方法都需要用await或.then()处理返回结果，否则会拿到未执行完成的Promise对象

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