NUXT環境でのmp3ファイルの読み込み方法

Question

NUXT環境でのmp3ファイルの読み込み方法

お世話になります。
初めて投稿いたします!!

NUXT初学者です。

▼伺いたい事

NUXT環境でのmp3ファイルの読み込み方法

▼解決したいエラー内容

現在コンソール確認すると下記のエラーが出ております。

http://localhost:63592/[object%20Module] net::ERR_ABORTED 404 (Not Found)

また読み込み等初歩的なミスがないかよく確認いたしました。

▼解決のためにやってみた事

公式を確認し下記の通りnuxt.configを設定しましたが、解決にいたりませんでした。

https://ja.nuxtjs.org/docs/2.x/features/configuration/#webpack-%E3%82%92%E6%8B%A1%E5%BC%B5%E3%81%97%E3%81%A6%E3%82%AA%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B

nuxt.config

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'nuxt-web',
    htmlAttrs: {
      lang: 'ja'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~/assets/css/reset.css'
  ],

  styleResources: {
    scss: [
      '~/assets/scss/_index.scss'
    ]
  },

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    "~/plugins/vue-loaders"
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/style-resources',
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      vue: {
        transformAssetUrls: {
          audio: 'src',
        },
      },
    },

    extend(config, ctx) {
      config.module.rules.push({
        test: /.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      })
    },
  },
  
  
}

index.vue

 <audio id="audio" src="~/assets/sound.mp3" loop>
        あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
 </audio>

ご教授いただける方、何卒よろしくお願い申し上げます。