Vue webpack动态导入需要不起作用

Posted 2023-02-23

【中文标题】Vue webpack动态导入需要不起作用

【英文标题】：Vue webpack dynamic import with require not working

【发布时间】：2021-03-21 08:33:15

【问题描述】：

我正在构建一个播放不同声音的应用程序，我制作了一个包含许多 Noise 组件的 NoiseMix 组件。每个 Noise 都应该有自己的 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>

【问题讨论】：

试试return require('@/assets/sounds/' + this.filename)，当然用编辑的文件名而不是完整路径

如果你使用 :src="@url" 而不是计算属性会怎样。

作为测试，你可以试试return require(`@/assets/sounds/$this.url.split("/").pop()`)。当 Webpack 对所需路径有更多了解时，动态导入效果最好。 编辑： 刚刚意识到这几乎就是@Dan 要求你做的事情

【参考方案1】：

Webpack 需要一些帮助才能通过动态导入获得正确的路径（我怀疑问题出在使用别名本身，但我没有对其进行足够的测试。）尝试：

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

它看起来与你所拥有的基本相同，但它给出了预期的结果。