Firebase Hosting部署React+Vite应用图片无法加载问题排查

问题根源 #

Vite构建生产环境时，src目录不会被打包到最终产物（dist）中，你直接引用src/assets/xxx的路径在部署后无法找到对应资源；同时firebase.json配置未正确指向Vite的构建产物目录，导致Firebase无法定位静态资源。

步骤1：修正图片引用路径 #

方式一：使用相对路径（组件内常用） #

根据组件所在目录与assets的相对位置调整路径，比如组件在src/components下，图片在src/assets，则路径改为：

<img src="../assets/logo.png" alt="main logo" />
<img src="../assets/icons/AboutUsIcon.png" alt="about us" />
<img src="../assets/icons/blogIcon.png" alt="blog" />

方式二：通过import导入资源（Vite官方推荐） #

将图片作为模块导入，Vite会自动处理资源路径与打包：

import logo from '../assets/logo.png';
import aboutUsIcon from '../assets/icons/AboutUsIcon.png';
import blogIcon from '../assets/icons/blogIcon.png';

// 渲染图片
<img src={logo} alt="main logo" />
<img src={aboutUsIcon} alt="about us" />
<img src={blogIcon} alt="blog" />

方式三：使用绝对路径（需配合Vite配置） #

确保vite.config.js中base为默认的/（或对应部署路径），然后路径改为：

<img src="/assets/logo.png" alt="main logo" />
<img src="/assets/icons/AboutUsIcon.png" alt="about us" />
<img src="/assets/icons/blogIcon.png" alt="blog" />

Vite构建后，图片会被输出到dist/assets目录，部署后根目录对应dist，因此/assets能正确指向资源。

步骤2：调整firebase.json配置 #

Vite默认构建产物在dist目录，需让Firebase Hosting指向该目录，修改配置如下：

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

• public: 指定Firebase部署的静态资源目录为Vite的构建产物dist
• rewrites: 配置单页应用路由 fallback，避免刷新页面出现404

步骤3：部署流程 #

1. 本地构建生产产物：

npm run build

2. 部署到Firebase：

firebase deploy

如果想让Firebase自动执行构建，可在firebase.json中添加预部署脚本：

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

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