Vue webpack dynamic import with require not working

Question

I'm building an app that plays different sounds, I made a NoiseMix component that will have many Noise components. Each Noise should have its own url parameter to load the actual mp3 but I'm having troubles with the static files.

in NoiseMix I have this data:

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
            }
        ]
    }
},

And my Noise Component looks like this:

<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 needs a bit of assistance in getting the correct path with dynamic imports (I suspect the issue is with using the alias by itself but I haven't tested it enough.) Try:

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

It looks essentially the same as what you have but it gives the expected result.