使用 Nuxt.js 加载.mp3文件

Question

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

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

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中使用了另一个加载器吗？

提前感谢！

Answer 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]'
}
})
}
}
}

Answer 2

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

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

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

与其直接在javascript中导入，我建议您使用通用资源加载器加载文件。