Блог

Главная - Вопросы по программированию - Динамический импорт Vue webpack с требованием не работает

Динамический импорт Vue webpack с требованием не работает

#javascript #vue.js #webpack #vue-component #vue-cli

#javascript #vue.js #веб-пакет #vue-компонент #vue-cli

Вопрос:

Я создаю приложение, которое воспроизводит разные звуки, я создал компонент NoiseMix, который будет содержать много шумовых компонентов. Каждый шум должен иметь свой собственный параметр url для загрузки фактического mp3, но у меня возникают проблемы со статическими файлами.

в 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>

Комментарии:

1. Попробуйте return require('@/assets/sounds/' this.filename) , конечно, с отредактированным именем файла вместо полного пути

2. Что, если вы используете:src=» @{url} » вместо вычисляемого свойства.

3. В качестве теста, пожалуйста, попробуйте return require(`@/assets/sounds/${this.url.split("/").pop()}`) . Динамический импорт в Webpack работает лучше всего, когда он знает больше о требуемых путях. Редактировать: только что понял, что это в значительной степени то, что @Dan просит вас сделать тоже

Ответ №1:

Webpack нуждается в небольшой помощи в получении правильного пути при динамическом импорте (я подозреваю, что проблема связана с использованием псевдонима самого по себе, но я недостаточно его протестировал.) Попробуйте:

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

Он выглядит практически так же, как и у вас, но дает ожидаемый результат.