vue webpack怎么打包音乐文件?

Question

我在App.vue中写入

在webpack.base.conf.js中配置
{
test : /.(mp3)(\?.*)?$/,
loader : 'url-loader',
options : {
name : utils.assetsPath('assets/[name].[hash:7].[ext]')
}
}
npm run dev 的时候，音乐文件总是提示404(not found)

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
在 Webpack 中使用 url-loader 完成资源文件的打包、加载，可以有一下几个步骤：

安装相应的 loader
bash
npm install url-loader file-loader --save-dev
在 webpack.base.conf.js 中添加 rules 配置
javascript

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(mp3)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('assets/[name].[hash:7].[ext]'),
          },
        },
      },
    ],
  },
  // ...
};

在上述配置中，我们通过正则表达式匹配 MP3 后缀的文件进行打包，如果资源大小小于 10KB，则将它们打包成 DataURL，否则使用 file-loader 进行打包输出。

在项目中使用资源
在代码中使用资源时，需要使用相应的相对路径来访问资源，例如：

javascript
let audio = new Audio('../assets/test.mp3');
audio.play();

这里假设你在 src 目录下有一个 assets 目录，其中包含了 test.mp3 文件。需要注意的是，在开发环境中，Webpack Dev Server 是运行在内存中的，其不能直接读取输出目录中的文件，因此需要使用相对路径访问源文件。

如果还是出现404错误，可以检查一下文件路径是否正确，并确保打包后的资源文件已经被正确输出到指定目录，例如 dist/assets/ 目录中。

最后，也可以尝试清除缓存再重新编译运行程序，看看能否解决问题。

希望这些信息能够对你有所帮助。