时间戳

首页 > 解决方案 > 如何编辑 vue-loader 以支持音频文件？

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

问题描述

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

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

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

我真的不知道如何编辑 webpack。尽管如此，我还是在文档中找到了这个 来创建一个 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.jswebpackvue-componenthtml5-audiovue-cli-3

解决方案

如果您使用的是 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]'
            }
            }
        ]
    }
});

推荐阅读