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

Question

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

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

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

我真的不知道如何编辑 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>

感谢帮助

Answer 1

如果您使用的是 Vue App，请转至 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]'
            }
            }
        ]
    }
});

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

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

vue.js

webpack

vue-component

html5-audio

vue-cli-3