Vue项目部署后assets静态资源路径失效问题求助

核心问题原因 #

本地开发时Webpack Dev Server会直接映射src目录，硬编码的路径能正常访问；但项目打包部署后，资源会被Webpack优化重命名，并输出到dist/assets目录，原硬编码路径无法匹配打包后的资源位置，导致404。

解决步骤 #

1. 使用require()让Webpack处理资源路径 #

修改Releases.vue中tracks数组的资源路径，通过require()将资源纳入Webpack打包流程，自动生成正确的部署路径：

data() {
  return {
    tracks: [
      {
        title: "Track Name",
        artist: "Artist name",
        cover: require('@/assets/cover/teste.webp'),
        music: require('@/assets/music/teste.ogg'),
        linkSpotify: "http://link_example.com",
      }
    ],
  };
}

注：@是Vue CLI默认配置的src目录别名，也可以使用相对路径require('../assets/cover/teste.webp')，但@更简洁且不易出错。

2. 确保子组件正确绑定资源 #

检查MusicCard.vue中资源的使用方式，必须通过v-bind动态绑定路径，而非静态字符串：

<!-- 正确写法 -->
<img :src="cover" alt="专辑封面" />
<audio :src="music" controls></audio>

<!-- 错误写法，静态路径无法解析打包后的资源 -->
<img src="cover" alt="专辑封面" />

3. 验证Vue项目配置（可选） #

如果部署在服务器子路径下，需在vue.config.js中配置publicPath；默认根路径部署无需修改：

module.exports = {
  // 生产环境部署路径，根据实际服务器路径调整
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  // 打包后资源输出目录，默认就是assets，可保持默认
  assetsDir: 'assets'
}

额外说明 #

• 若资源放在public目录下，可直接使用绝对路径（如/cover/teste.webp），但assets目录下的资源必须通过Webpack处理，因此必须用require()或import引入。
• 避免直接硬编码src/assets/xxx这类路径，这类路径仅在开发环境有效，打包后会失效。

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