[英]Vue webpack dynamic import with require not working
我正在构建一个播放不同声音的应用程序,我制作了一个具有许多噪声组件的 NoiseMix 组件。 每个噪声都应该有自己的 url 参数来加载实际的 mp3,但我在使用 static 文件时遇到了问题。
在 NoiseMix 我有这个数据:
data: () => {
return {
sounds: [
{ id: 1,
url: "/assets/sounds/rain.mp3",
icon: "fas fa-cloud-rain",
name: "Rain",
volume: 50
}, {
id: 2,
url: "/assets/sounds/rain.mp3",
icon: "fas fa-wind",
name: "Wind",
volume: 50
}, {
id: 3,
url: "/assets/sounds/rain.mp3",
icon: "fas fa-water",
name: "Waves",
volume: 75
}
]
}
},
我的噪声分量如下所示:
<template>
<div class="single-noise">
<div class="single-noise__icon">
<i :class="icon"></i><br />
</div>
<div class="single-noise__content">
ID: {{id}}<br />
Name: {{name}}<br />
Sound URL: {{url}}<br />
Volume: {{volume}}<br />
<input type="range" min="0" max="100" name="" v-model="volume"><br />
audio:
<audio controls>
<source :src="trackUrl" type="audio/mpeg">
</audio>
</div>
</div>
</template>
<script>
export default {
name: "Noise",
props: {
url: String,
icon: String,
name: String,
id: Number,
volume: Number,
},
computed: {
trackUrl () {
// THIS LINE IS THE PROBLEM
// If I use require('@' + this.url); the app doesn't load at all and there's no error
return require('@' + '/assets/sounds/rain.mp3');
}
}
}
</script>
Webpack 需要一些帮助才能通过动态导入获得正确的路径(我怀疑问题在于单独使用别名,但我没有对其进行足够的测试。)尝试:
return require('@/assets/sounds/' + this.filename)
它看起来与您所拥有的基本相同,但它给出了预期的结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.