Vue webpack 中使用 require 动态导入音频静态资源不生效问题

两个核心原因导致资源加载失败、应用白屏无报错：

• Webpack 对 require 的路径做编译阶段的静态分析，如果传入的是完全无固定静态上下文的动态拼接表达式，Webpack 无法在打包时定位需要纳入产物的资源文件，就会触发静默加载失败，不会抛出可感知的错误。
• 你写的 require('@' + this.url)、甚至写死拼接的 require('@' + '/assets/sounds/rain.mp3') 本质都是动态表达式，不是明确的字符串字面量，Webpack 的静态解析逻辑无法识别这个路径，自然无法正确加载资源。

方案1：适配Webpack动态require规则（适合需要走资源打包流程、带哈希指纹的场景） #

1. 调整 NoiseMix 组件里的 sounds 数据结构，把url字段从完整路径改为只存音频文件名，避免把固定目录路径放到动态拼接逻辑里：

   data: () => {
     return {
       sounds: [
         {   
           id: 1,
           url: "rain.mp3",
           icon: "fas fa-cloud-rain",
           name: "Rain",
           volume: 50
         }, 
         {
           id: 2,
           url: "wind.mp3",
           icon: "fas fa-wind",
           name: "Wind",
           volume: 50
         }, 
         {
           id: 3,
           url: "waves.mp3",
           icon: "fas fa-water",
           name: "Waves",
           volume: 75
         }
       ]
     }
   },
   

2. 修改 Noise 组件的 trackUrl 计算属性，给 require 传入带固定静态目录片段的模板字符串，让Webpack可以明确扫描资源目录：

   computed: {
     trackUrl () {
       // 前面的@/assets/sounds/是完全写死的静态路径，Webpack会自动扫描该目录下的所有mp3资源
       return require(`@/assets/sounds/${this.url}`)
     }
   }
   

   注意：这里的路径必须保留明确的静态前缀，不能把整个路径都替换成动态变量，否则Webpack还是无法定位资源，会复现白屏无报错的问题。

3. 如果不想修改原有 sounds 数据里的完整路径（即还是保留 "/assets/sounds/rain.mp3" 这类写法），可以在计算属性里先截取纯文件名，再走动态require逻辑：

   computed: {
     trackUrl () {
       // 从完整路径中截取最后一段的文件名
       const fileName = this.url.split('/').pop()
       return require(`@/assets/sounds/${fileName}`)
     }
   }
   

方案2：改用public目录托管静态音频（更简单的适配方案） #

如果不需要给音频文件加内容哈希指纹，完全可以把mp3文件放到项目根目录的public/sounds/文件夹下：

• Vue CLI、Vite等主流Vue项目脚手架，会把public目录下的所有文件原封不动拷贝到打包输出的根目录，不需要走Webpack的模块解析流程。
• 此时NoiseMix里的sounds数据的url直接写对应公共路径即可，比如"/sounds/rain.mp3"。
• Noise组件里的<source>标签直接绑定传入的url属性即可，完全不需要写require和trackUrl计算属性：

  <audio controls>
      <source :src="url" type="audio/mpeg">
  </audio>
  

  这种方式没有路径解析的限制，开发环境、生产打包后都可以正常访问资源，对音效这类常规静态资源是更高效的选择。

• 你原有sounds数组的笔误：三个音效的url都写的是/assets/sounds/rain.mp3，记得替换成对应wind、waves的音频文件名，否则三个音效会共用同一段下雨的音频。
• 不要写require(this.url)这类完全动态的路径，Webpack在打包阶段根本不知道你要加载哪个文件，必然会触发静默加载失败。
• 不要把别名@的拼接放到动态部分，固定的静态前缀里写@/xxx/path/是Webpack可以识别的，拆成'@' + 动态路径就会失去别名的解析能力。

内容的提问来源于stack exchange，提问作者Jonas Grumann