使用Vite构建React应用：本地图片正常构建部署后消失的问题求助

一、public文件夹资源的正确引用逻辑 #

Vite对public目录的资源处理有固定规则，这是导致你本地正常、构建后失效的核心原因：

• 本地开发时，Vite会把public文件夹视为站点根目录的一部分，所以直接用**根路径（以/开头）**访问资源即可，比如/beagle.jpg，而非public/beagle.jpg或.public/image-name。
• 执行npm run build后，public下的所有文件会被直接复制到dist文件夹的根目录，此时如果你的引用路径是public/beagle.jpg，页面会去dist/public/beagle.jpg找文件，但实际文件在dist/beagle.jpg，自然找不到。

修正后的引用写法：

<img src="/beagle.jpg" alt="Beagle" />

二、import public/beagle.jpg报错的原因 #

Vite不会将public文件夹内的文件纳入模块解析体系，这类资源会被直接拷贝到输出目录，不经过模块打包流程，所以无法通过import语法导入。

如果想要用import方式管理图片，需要把图片移到src目录下（比如src/assets文件夹），写法如下：

// 假设图片在src/assets/beagle.jpg
import img1 from '../assets/beagle.jpg';

<img src={img1} alt="Beagle" />

三、部署到GitHub Pages的额外配置 #

如果部署到GitHub Pages，因为站点路径是https://用户名.github.io/仓库名/（非根域名），需要配置Vite的基础路径：

1. 在项目根目录创建或修改vite.config.js：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/你的仓库名称/' // 示例：base: '/my-vite-react-app/'
});

2. 图片引用依然保持根路径写法，Vite构建时会自动适配GitHub Pages的路径结构。

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