Vercel部署Vite React项目遇RollupError：无法解析'foo/path'

以下是针对你遇到的RollupError: Could not resolve 'foo/path'问题的排查和解决步骤：

1. 验证Vite路径别名配置 #

本地正常但构建失败，最常见的原因是路径别名在生产构建阶段未正确配置。需要同时在Vite配置和项目的编译配置中设置别名：

• 在vite.config.js中添加别名解析规则：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'foo': path.resolve(__dirname, './src/foo') // 替换为你的实际目录路径
    }
  }
})

• 对于JavaScript项目，在jsconfig.json中补充别名映射：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "foo/*": ["src/foo/*"]
    }
  }
}

本地编辑器会识别jsconfig.json的配置，但Vercel构建依赖Vite的resolve.alias来解析路径，两者必须保持一致。

2. 检查路径大小写一致性 #

Vercel部署环境基于Linux，文件名严格区分大小写；而Windows/macOS默认不区分。如果你的代码中写的是foo/path，但实际文件目录是Foo/Path，本地能正常运行，但构建时会出现解析失败。逐一核对导入语句的路径大小写与实际文件结构是否匹配。

3. 确保依赖安装一致 #

Vercel构建会重新安装依赖，可能存在本地缓存与线上依赖版本不一致的情况：

• 删除本地node_modules、package-lock.json（或yarn.lock），重新执行npm install（或yarn install）后提交锁文件到仓库
• 在Vercel控制台的项目部署设置中，开启"Install dependencies from lock file"选项，强制使用锁文件中的依赖版本

4. 确认Vercel构建命令 #

检查项目package.json的scripts字段，确保build命令为vite build：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Vercel会自动读取该命令，无需手动设置；如果手动设置了构建命令，确保是npm run build或yarn build。

5. 排查.gitignore规则 #

如果foo/path对应的文件或目录被加入了.gitignore，Vercel部署时无法拉取到该文件，导致解析失败。检查.gitignore文件，确认需要的文件没有被排除，并且已经提交到Git仓库。

内容的提问来源于stack exchange，提问作者Abdul Raffay S.