嗨，我之前也碰到过几乎一模一样的Vite部署坑，给你梳理下问题根源和靠谱的解决办法～

首先咱们先拆解下你遇到的两个矛盾问题：

1. 生产环境404：这大概率是因为你的项目没有部署在服务器的根目录下（比如你的域名是xxx.com，但项目部署在xxx.com/my-app/这种子路径）。Vite默认的base配置是'/'，build后会生成以根目录为起点的绝对资源路径（比如/assets/style.css），但服务器上这些文件实际在/my-app/assets/，自然就会404找不到。
2. 设置base: ''后图片失效：当你把base设为空字符串，Vite会生成相对路径的资源引用（比如assets/style.css），这时候CSS和JS能找到对应的文件了，但你的图片用的是绝对路径（/imageName.jpg）——这个路径会直接指向服务器的根目录（比如xxx.com/imageName.jpg），可你实际把图片放在了项目部署目录的根目录（xxx.com/my-app/imageName.jpg），所以服务器找不到图片。

接下来给你几个针对性的解决办法，你可以根据自己的部署情况选：

办法一：正确配置base路径（最推荐） #

先明确你的生产服务器部署路径：

• 如果项目部署在服务器根目录（比如直接访问xxx.com就是你的项目）：那保持base: '/'（Vite默认值，不用改），这时候生产环境404大概率是服务器配置的问题——比如Nginx的root没有指向dist文件夹，或者没配置SPA路由的 fallback（React单页应用需要让服务器找不到路由时返回index.html）。举个Nginx配置的例子：

  server {
    listen 80;
    server_name your-domain.com;
    root /path/to/your/dist;
    index index.html;
  
    # 处理SPA路由
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

• 如果项目部署在子目录（比如xxx.com/my-app/）：把vite.config.ts里的base改成你的子路径，注意结尾必须加斜杠：

  export default defineConfig({
    base: '/my-app/',
    // 其他配置...
  })
  

  改完重新build，这时候Vite会自动把所有资源（包括图片，前提是你用Vite的方式引用图片）的路径都加上/my-app/前缀，这样生产环境就能正确找到所有文件了。

办法二：用Vite的方式引用图片（彻底解决路径问题） #

不要在img的src里直接写绝对路径，而是用Vite支持的静态资源导入方式，让Vite帮你处理路径：

// 先导入图片，路径根据你实际的文件位置调整
import heroImage from '../imageName.jpg';

// 然后在组件里使用
function MyComponent() {
  return <img src={heroImage} alt="Hero" />;
}

这样不管你base设成什么，Vite在build时都会自动把图片路径转换成正确的相对/绝对路径，还能自动帮你优化小图片（转成base64），一举两得。

办法三：如果非要把图片放dist根目录 #

如果你坚持要把图片放在dist的根目录，同时用base: ''，那把图片的src改成相对路径（去掉开头的斜杠）：

<!-- 把 /imageName.jpg 改成 ./imageName.jpg -->
<img src="./imageName.jpg" alt="..." />

这样图片路径会相对于当前页面的路径去寻找，就不会跑到服务器根目录找了。

最后再提醒下：本地vite preview正常是因为Vite的开发服务器会自动处理路径和SPA路由，但生产环境的服务器（Nginx/Apache等）需要自己配置好静态文件的根目录和路由 fallback，不然也容易出404问题。

内容来源于stack exchange