Vue webpack 動態導入需要不起作用

Question

我正在構建一個播放不同聲音的應用程序，我制作了一個具有許多噪聲組件的 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>

Answer 1

Webpack 需要一些幫助才能通過動態導入獲得正確的路徑（我懷疑問題在於單獨使用別名，但我沒有對其進行足夠的測試。）嘗試：

return require('@/assets/sounds/' + this.filename)

它看起來與您所擁有的基本相同，但它給出了預期的結果。