如何编辑 vue-loader 以支持音频文件？答案

【问题标题】：How do I edit vue-loader to support audio files?如何编辑 vue-loader 以支持音频文件？
【发布时间】：2021-10-07 14:17:44
【问题描述】：

这是我在这里的第一个问题，如果您需要更多信息，请告诉我。

我正在使用 vue CLI 3 做一个小项目，我想添加音频和音频控件，但出现以下错误：

模块解析失败：意外字符 '' (1:0) 您可能需要一个适当的加载器来处理这种文件类型，目前没有加载器配置为处理此文件。看 https://webpack.js.org/concepts#loaders

我真的不知道如何编辑 webpack。尽管如此，我还是在documentation 中找到了这个来创建一个 vue.config.js 文件。但我真的不明白我应该在那里添加什么。

这是我的组件的外观：

<template>
  <div class="controller-container">
    <audio controls>
      <source src="@/assets/Catastrophe03music.m4a" type="audio/mp4" />
    </audio>
  </div>
</template>

<script>


export default {
  name: "MusicController",
  components: {},
};
</script>

感谢您的帮助

【问题讨论】：

标签： vue.js webpack vue-component html5-audio vue-cli-3

【解决方案1】：

如果您使用的是 Vue 应用程序，请转到 webpack.config.js 并添加以下代码

    module: {
        rules: [
            {
                test: /\.mp3$/,
        loader: 'file-loader',
                exclude: /node_modules(?!\/foundation-sites)|bower_components/,
                options: {
                name: '[path][name].[ext]'
            }
            }
        ]
    }

但如果你有 webpack.mix.js 文件，那么添加以下代码。

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.mp3$/,
        loader: 'file-loader',
                exclude: /node_modules(?!\/foundation-sites)|bower_components/,
                options: {
                name: '[path][name].[ext]'
            }
            }
        ]
    }
});

【讨论】：