How do I edit vue-loader to support audio files?

Question

this is my first question here so please let me know if you need more info.

I am working on a small project using vue CLI 3 and I want to add audio and audio controls but I get the following error:

Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I don't really know how to edit webpack. Nonetheless, I found this in the documentation to create a vue.config.js file. But I don't really understand what should I add there.

this is how my component looks:

<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>

thanks for helping

Answer 1

If you are using Vue App then go to webpack.config.js and add the following code

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

But if you have webpack.mix.js file then add the following code.

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