Capacitor 4应用中无法找到assets文件夹内文件路径的问题

Capacitor和Cordova的本地文件路径逻辑存在差异，直接沿用Cordova的相对路径会导致文件找不到，需要按照Capacitor的规则处理路径：

方法1：用Capacitor Filesystem API获取绝对路径 #

1. 先安装@capacitor/filesystem（未安装的话执行）：

npm install @capacitor/filesystem
npx cap sync

2. 编写代码获取音频文件的绝对URI，再传给Cordova Media：

import { Filesystem, Directory } from '@capacitor/filesystem';
import type { Media } from '@ionic-native/media';

async function playLocalAudio() {
  try {
    // 获取assets文件的URI
    const uriResult = await Filesystem.getUri({
      path: 'assets/audio/sound.mp3',
      directory: Directory.Public
    });
    
    // 调整URI格式适配Cordova Media：Android需替换content://为file://
    const audioPath = uriResult.uri.replace('content://', 'file://');
    
    // 初始化Media并播放
    const media = new Media(audioPath, () => {
      console.log('播放完成');
    }, (err) => {
      console.error('播放错误:', err);
    });
    media.play();
  } catch (err) {
    console.error('获取路径失败:', err);
  }
}

方法2：用Cordova File插件解析路径 #

如果更习惯Cordova生态工具，可使用cordova-plugin-file处理：

1. 安装插件：

npm install cordova-plugin-file
npx cap sync

2. 用resolveLocalFileSystemURL获取正确路径：

function playLocalAudio() {
  // Capacitor中assets目录对应的cdvfile路径为cdvfile://localhost/assets/
  window.resolveLocalFileSystemURL('cdvfile://localhost/assets/audio/sound.mp3', (entry) => {
    const media = new Media(entry.toURL(), () => {
      console.log('播放完成');
    }, (err) => {
      console.error('播放错误:', err);
    });
    media.play();
  }, (err) => {
    console.error('解析路径失败:', err);
  });
}

关键注意点 #

• 音频文件需放在项目的src/assets/audio/sound.mp3，构建后会自动打包到Capacitor的www/assets目录，不要手动修改路径结构。
• Android和iOS的URI格式有差异，上述方法可自动适配，无需手动写死平台路径。
• 确保config.xml未限制本地文件访问，Capacitor默认已配置允许cdvfile访问，无需额外修改。

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