Vite+React部署Vercel后background:url图片不显示问题求助

• 用绝对路径前缀定位资源
  Vite打包后，public目录下的资源会直接部署到站点根目录，CSS中的相对路径会基于CSS文件的位置解析，导致部署后路径错误。直接给url加上根路径前缀 / 即可：

  background: url('/assets/jewelry_category.jpg');
  

• 配置Vite的base选项（子路径部署场景）
  若项目部署在Vercel的子路径下（比如自定义域名的子目录、预览分支路径），需要在vite.config.js中指定base：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    base: '/your-project-slug/' // 替换为你的项目子路径，比如Vercel项目名
  });
  

  此时CSS路径要对应调整为：

  background: url('/your-project-slug/assets/jewelry_category.jpg');
  

• 检查文件名大小写
  Vercel部署环境区分文件名大小写，本地Windows环境通常不区分。确保CSS中写的文件名和public/assets下的实际文件名完全一致（比如Jewelry.jpg和jewelry.jpg是两个不同文件）。

• 本地打包验证路径
  执行npm run build生成dist目录，查看：

  • dist/assets下是否存在目标图片
  • 打包后的CSS文件中，background的url是否正确指向/assets/xxx.jpg
    若本地打包后路径就错误，部署后必然无法加载，需重新调整路径写法。

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