本文详解如何在 Tauri + Vue 项目中正确加载并播放本地 MP3 等音频文件，解决 Not allowed to load local resource 和 ERR_CONNECTION_REFUSED 等常见错误，核心在于配置自定义协议、设置内容安全策略，并使用 convertFileSrc 安全转换文件路径为可访问的 URL。
本文详解如何在 tauri + vue 项目中正确加载并播放本地 mp3 等音频文件，解决 `not allowed to load local resource` 和 `err_connection_refused` 等常见错误，核心在于配置自定义协议、设置内容安全策略，并使用 `convertfilesrc` 安全转换文件路径为可访问的 url。
在 Tauri 中直接使用 file:// 协议（如 C:\path\to\test.mp3）加载媒体资源会触发浏览器同源策略拦截，导致「Not allowed to load local resource」错误；而未正确配置协议时调用 convertFileSrc() 则会生成类似 https://asset.localhost/... 的 URL，但因后端协议服务未启用，返回 ERR_CONNECTION_REFUSED。根本解决方案是启用并配置 Tauri 的 asset 协议，使其能安全托管并提供本地文件服务。
✅ 正确配置 tauri.conf.json
首先，在 src-tauri/tauri.conf.json 的 tauri.allowlist 节点下，必须同时配置 protocol 和 security（CSP）：
{
"tauri": {
"allowlist": {
"protocol": {
"all": true,
"asset": true,
"assetScope": ["**"]
},
"security": {
"csp": "default-src 'self'; media-src 'self' asset: https://asset.localhost;"
}
}
}
}⚠️ 注意：
- assetScope: ["**"] 表示允许通过 asset: 协议访问所有子路径（含 AppData、AppConfig 等目录）；
- media-src 必须显式包含 asset: 和 https://asset.localhost（Tauri v1.5+ 默认启用该域名），否则 <video> 或 <audio> 标签将拒绝加载；
- 修改后需重启 Tauri 开发服务器（npm run tauri dev）使配置生效。
✅ 前端代码：使用 convertFileSrc 加载音频
在 Vue 组件中（推荐使用 Composition API），按以下方式构造可播放的音频 URL：
<template>
<video ref="videoEl" :key="audioKey" controls class="w-full">
<source ref="sourceEl" :src="audioUrl" type="audio/mpeg" />
</video>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { appDataDir, join } from '@tauri-apps/api/path';
import { convertFileSrc } from '@tauri-apps/api/tauri';
const videoEl = ref(null);
const sourceEl = ref(null);
const audioUrl = ref('');
const audioKey = ref(0);
onMounted(async () => {
try {
const appDataPath = await appDataDir();
const filePath = await join(appDataPath, 'test.mp3');
audioUrl.value = convertFileSrc(filePath); // ✅ 返回 asset:// 或 https://asset.localhost/... URL
audioKey.value = Date.now(); // 强制 video 重新加载 source
// 可选：显式调用 load()（现代浏览器通常自动处理）
if (videoEl.value) {
videoEl.value.load();
}
} catch (err) {
console.error('Failed to resolve audio path:', err);
}
});
</script>? convertFileSrc() 不会发起网络请求，它只是同步生成一个受信任的协议 URL，由 Tauri 内部 HTTP 服务（运行在 asset.localhost）动态响应文件读取请求 —— 因此无需手动处理 Uint8Array（readBinaryFile 方式适用于需要解码/分析音频数据的场景，而非直接播放）。
⚠️ 常见问题排查
仍报 ERR_CONNECTION_REFUSED？
检查是否遗漏 tauri.allowlist.security.csp 配置，或 assetScope 范围过窄（如写成 ["test.mp3"] 无法匹配路径）；确认 Tauri 进程已完全重启。播放时静音或无响应？
确保 MP3 文件真实存在于目标路径（可用 exists() API 验证），且 MIME 类型正确（audio/mpeg 对应 .mp3；.wav 用 audio/wav，.ogg 用 audio/ogg）。生产环境打包后失效？
appDataDir() 在打包后仍有效（路径为用户数据目录），但请确保安装包部署时已预置音频文件，或通过 Tauri 命令行/拖拽等方式写入。
✅ 总结
Tauri 播放本地音频的唯一推荐路径是：convertFileSrc + 正确的协议与 CSP 配置。它兼顾安全性、兼容性与简洁性，避免了 Base64 编码（内存膨胀）、fetch() + Blob URL（跨域/生命周期管理复杂）或原生插件等冗余方案。只要配置一步到位，即可像 Web 一样自然使用 <video> 或 <audio> 标签控制本地媒体——这才是 Tauri “安全优先”设计哲学的最佳实践。
