Vue.js应用本地图片正常，部署Firebase后404无法加载问题排查

我帮你排查下这个问题，其实核心原因是本地开发和生产构建的资源路径处理逻辑不一样：本地时webpack能直接解析../assets/logo.png这种相对路径，但生产构建后，资源会被打包到dist目录下的特定文件夹，原来的相对路径就失效了，Firebase自然找不到这些图片。下面给你几个靠谱的解决方案：

方案1：用@别名引入图片（最推荐） #

Vue项目默认配置了@作为src目录的别名，不管开发还是生产环境，webpack都能正确解析这个路径，自动帮你处理资源打包后的路径。

直接修改img标签：

<img src="@/assets/logo.png" style="width:100%" alt="Avatar">

如果需要动态绑定（比如用变量控制图片），就用:src配合require：

<img :src="require('@/assets/logo.png')" style="width:100%" alt="Avatar">

方案2：通过require动态引入到data里 #

如果你的图片路径需要根据业务逻辑动态变化，把图片资源通过require引入到组件的data中是更稳妥的方式：

<template>
  <img :src="logoImage" style="width:100%" alt="Avatar">
</template>

<script>
export default {
  data() {
    return {
      logoImage: require('../assets/logo.png')
    }
  }
}
</script>

这样webpack会明确知道这个资源需要被打包，构建后生成正确的访问路径。

方案3：检查Firebase的部署配置 #

别漏了确认firebase.json里的hosting配置是否正确指向Vue的构建输出目录dist：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

如果public字段设成了别的目录，Firebase就找不到你打包好的图片资源了。

方案4：确认部署前执行了生产构建 #

最后别忘了，部署到Firebase之前一定要先执行生产构建命令：

npm run build

这个命令会把项目打包到dist目录，你只有把dist里的内容部署到Firebase，资源才能被正确加载。

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