vue3怎么导入wav文件

在 Vue 3 中，您可以使用 `require` 或 `import` 语句导入 `.wav` 文件，但是需要进行一些额外的配置。

首先，您需要安装 `url-loader` 和 `file-loader` 来处理 `.wav` 文件。可以使用以下命令进行安装：

npm install url-loader file-loader --save-dev

接下来，在 Webpack 的配置文件中添加以下代码：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 添加 wav 文件的 loader 配置
    config.module
      .rule('wav')
      .test(/\.wav$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 8192, // 文件大小限制
        name: 'assets/sound/[name].[hash:8].[ext]' // 输出文件名格式
      })
      .end();
  }
};

上述配置会将所有 `.wav` 文件使用 `url-loader` 进行处理，并将它们复制到输出目录中。然后，您就可以通过 `import` 语句导入 `.wav` 文件了：

import beepSound from '@/assets/sound/BEEP1.WAV';

请注意，在上述配置中，我们使用了 `url-loader` 来处理 `.wav` 文件，因为它可以将小文件转换为 Data URL 或 Base64 编码的字符串，从而减少 HTTP 请求的数量。但是，如果您的 `.wav` 文件非常大，最好使用 `file-loader` 将其复制到输出目录中。