Nuxt.jsでmp3を再生するためにnuxt.config.jsのbuild設定を追加

初投稿です

Nuxt.jsでmp3を再生しようとすると'mp3'を扱う適切なloaderがないとのエラー

Main.vue

export default {
  methods: {
    sound(name){
      if (name == 'SANA'){
        let audio = new Audio(require('@/images/TWICE/shyshyshy.mp3'))
        audio.play() }
    },
}

 ERROR  in ./images/TWICE/shyshyshy.mp3                                                                                                                                           friendly-errors 14:35:31
Module parse failed: Unexpected character '' (1:3)                                                                                                                                friendly-errors 14:35:31
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
(Source code omitted for this binary file)                                                                                                                                                            friendly-errors 14:35:31
 @ ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./pages/Main.vue?vue&type=template&id=4630295c&scoped=true& 216:15-54
 @ ./pages/Main.vue?vue&type=template&id=4630295c&scoped=true&
 @ ./pages/Main.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

versionは以下

$ npm -v
6.4.1
$ vue -V
@vue/cli 4.3.1
$ npx nuxt -v
@nuxt/cli v2.14.3

公式ドキュメントいわくwebpackの設定を拡張する必要があるとのこと
https://ja.nuxtjs.org/faq/webpack-audio-files/
ということでコピペして以下のようにnuxt.config.jsを修正

nuxt.config.js

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

無事再生できました。