GET http://localhost:3000/components/t.mp3 net::ERR_ABORTED 404（未找到）答案

【问题标题】：GET http://localhost:3000/components/t.mp3 net::ERR_ABORTED 404 (Not Found)GET http://localhost:3000/components/t.mp3 net::ERR_ABORTED 404（未找到）
【发布时间】：2020-07-10 02:38:47
【问题描述】：

我想问一下为什么我不能用 Howler 和 Html5 从本地电脑播放 mp3 文件，但我可以用 HTML5 播放 URL。它说无论哪种方式（howler 或 html5）都找不到我的本地 mp3 文件。我试过添加 './components/t.mp3' '../components/t.mp3' 'src/components/t.mp3' 仍然无法让它工作。可能是因为 NuxtJs 吗？尝试添加 type:"audio/mpeg" （用于 html5），并且尝试了不同的浏览器，但问题仍然存在。

我在浏览器控制台中获取错误消息：

GET http://localhost:3000/components/t.mp3 net::ERR_ABORTED 404（未找到）

代码：

<template>
  <div
    class="test"
  >
    <v-btn
      @click="playSound()"
    />
  </div>
</template>
<script>
require('howler')
export default {
  methods: {
    playSound () {
      const sound = new Audio('/components/t.mp3')
      // const sound = new Howl({   --- it doesn't work either.
      //   src: '/components/t.mp3'
      // })
      sound.play()
    }
  }
}
</script>
<style>
.test{
  margin: auto;
}
</style>

YES.mp3 也是如此

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

您必须将文件添加到资产目录（静态文件所在的位置）中，然后需要该文件。如果您不想保存在静态文件中，也可以使用任何其他路径进行操作。

例子：

/assets/music/file.mp3

data(){
    return {
        music: require('@/assets/music/file.mp3')
    }
},
methods:{
    playMusic(){
       const sound = new Audio(this.music)
       sound.play()
    }
}

然后你可以在你的方法中使用 this.music

如果你使用 webpack 服务，你将不得不使用文件加载器将其添加到你的规则中，就像在这个线程中解释的那样：Serving mp3 files using the webpack file loader

【讨论】：

OP 不需要为.mp3 文件配置加载器吗？我不认为有一个开箱即用的
不是因为 Vue 没有“读取”声音文件作为项目的一部分，它是一种资产。我在我的一个项目中使用这样的：window.plugins.NativeAudio.preloadSimple("click", state.sounds.newOrder);然后：window.plugins.NativeAudio.play("click");没有装载机。
但是 Webpack 仍然需要知道如何打包资源。另一种方法是转储 public 目录中的所有内容
好的，这很好，webpack 使用文件加载器提供 mp3。我附上了一个关于如何向 MP3 文件添加规则的线程。
坦克你！我还必须配置 webpack nuxtjs.org/faq/…