Vercel部署Vite应用时本地图片导入失败（模块未找到/Rollup错误）求助

针对Vite项目本地运行、构建正常，但Vercel部署时出现「模块未找到（Module not found）」或「Rollup解析导入失败」的问题，可按以下步骤排查解决：

• 检查路径大小写
  Vercel部署环境为Linux系统，严格区分文件名和路径大小写，而本地Windows/macOS通常不区分。比如本地导入路径写./assets/Header.png，实际文件是./assets/header.png，本地无问题但部署会报错。需确保所有导入路径与实际文件名的大小写完全一致。

• 配置Vite静态资源规则
  打开vite.config.js/ts，确认assetsInclude已包含你使用的图片格式，避免非标准格式被Rollup忽略：

  import { defineConfig } from 'vite'
  
  export default defineConfig({
    assetsInclude: ['**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.svg']
  })
  

• 规范图片导入方式

  • 若使用绝对路径，需在Vite配置中设置正确的base（比如部署到子路径时）：

    export default defineConfig({
      base: '/your-project-slug/'
    })
    

  • 推荐使用路径别名简化相对路径，避免多层级相对路径导致解析错误：

    import { defineConfig } from 'vite'
    import path from 'path'
    
    export default defineConfig({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src')
        }
      }
    })
    

    之后导入图片可写为import avatar from '@/assets/avatar.png'

• 核对Vercel构建配置
  进入Vercel项目的「Settings」-「Build & Development Settings」：

  • 确认「Build Command」为npm run build
  • 确认「Output Directory」为dist（Vite默认构建输出目录，若自定义过需改为对应目录）

• 清理缓存重新部署

  • 本地执行：删除node_modules、dist、package-lock.json，重新运行npm install和npm run build
  • 在Vercel控制台触发重新部署，勾选「Clear build cache」选项

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