使用 Nuxt.js 加载 .mp3 文件答案

【问题标题】：Loading .mp3 files with Nuxt.js使用 Nuxt.js 加载 .mp3 文件
【发布时间】：2019-02-23 21:27:34
【问题描述】：

我在使用 Nuxt.JS (Vue.js) 加载 .mp3 文件时遇到问题...

我试图在没有特定加载器的情况下加载文件，webpack 告诉他需要一个特定的文件加载器，当我在 nuxt.config.js 文件中添加 url-loader 时：

 build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
  if (isDev && isClient) {
    config.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules)/
    })

    config.module.rules.push({
      test: /\.(ogg|mp3|wav)$/i,
      loader: 'url-loader'
    })

  }
}

抛出错误：

TypeError
Cannot read property 'middleware' of undefined

有人在 Nuxt.Js 中使用过其他加载器吗？

提前致谢！

【问题讨论】：

尝试使用file-loader 而不是url-loader。
不幸的是还不行:'(
该错误看起来与 mp3 无关。
你使用的是哪个 Webpack 版本？
我正在使用webpack@3.12.0

标签： vue.js webpack nuxt.js

【解决方案1】：

来自 Nuxt.js 官方文档：https://nuxtjs.org/faq/webpack-audio-files/

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

【讨论】：

【解决方案2】：

通常，您只需在 webpack 配置中使用文件加载器：

{
  test: /\.mp3$/,
  include: '/path/to/directory',
  loader: 'file-loader'
}

你能分享你的配置文件吗？

我建议您使用通用 resource loader 加载文件，而不是直接在 javascript 中导入。

【讨论】：