部署Vite React应用至Surge时相对路径图片出现404错误求助

1. 调整 Vite 的 base 配置 #

Vite 默认 base 是根路径 /，但 Surge 部署时用相对路径更稳妥。

• 打开 vite.config.js（或 .ts），添加/修改配置：

  export default defineConfig({
    base: './',
    // 其他原有配置...
  })
  

• 重新执行 npm run build，再重新部署到 Surge。

2. 修正图片引用方式 #

别用相对路径指向 public 目录，两种正确写法：

• 根路径直接引用（配合上面的 base 配置）：

  <img src="/images/your-image.png" alt="图片描述" />
  

• 或者用 import 导入（Vite 会自动处理资源哈希，避免缓存问题）：

  import targetImg from '/images/your-image.png'
  <img src={targetImg} alt="图片描述" />
  

3. 检查 dist 目录结构 #

构建后打开 dist 文件夹，确认 images 目录和对应图片文件都存在。如果没找到，检查 .gitignore 或 Vite 的 publicDir 配置，确保没有把图片资源排除在外。

4. 部署时指定正确目录 #

部署命令要明确指向 dist 目录，别误传项目根目录：

surge dist your-domain.surge.sh

5. 清除 Surge 缓存 #

旧缓存可能导致新资源无法加载，部署时加 --clean 参数清除缓存：

surge dist your-domain.surge.sh --clean

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