Vite构建React站点部署Netlify后出现404资源加载失败求助

1. 检查图片引用路径 #

• 确保使用相对路径引用图片，比如./images/logo.png，而非绝对路径/images/logo.png。绝对路径会强制指向域名根目录，若站点部署在子路径下会导致资源找不到。
• 若图片存放在public文件夹，引用时无需加public前缀，直接用/images/logo.png即可（若站点部署在子路径，需配合后续base配置调整）。

2. 配置Vite的base参数 #

打开项目根目录的vite.config.js，添加base配置项：

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

export default defineConfig({
  plugins: [react()],
  base: './' // 若站点部署在子路径（如xxx.netlify.app/xxx/），则设为'/xxx/'
})

该配置会让Vite生成的所有资源路径基于当前目录，避免绝对路径引发的404问题。

3. 确认Netlify构建设置 #

• 登录Netlify后台，进入目标站点的Site settings > Build & deploy > Continuous deployment > Build settings。
• 检查Build command是否为npm run build（或yarn build，根据你的包管理器选择）。
• 确认Publish directory为dist——这是Vite默认的构建输出目录，若你修改过输出目录，需同步更新此处设置。

4. 规范图片导入方式 #

• 在组件中通过import导入图片时，确保路径正确，比如import logo from './assets/logo.png'，Vite会自动处理这类资源的打包路径。
• 避免在src文件夹内使用绝对路径引用图片，优先使用相对导入。

5. 清理缓存重新构建 #

• 进入Netlify后台的Deploys页面，选择最新的部署记录，点击Clear cache and deploy site，强制重新构建站点，避免缓存残留导致的路径异常。

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