SvelteKit本地构建正常，Vercel部署时Vite无法找到组件的问题求助

我之前遇到过几乎一模一样的SvelteKit部署到Vercel的路径问题，本地完全正常但线上找不到文件，结合你的排查过程，试试下面这些针对性的解决方案：

1. 优先检查文件路径的大小写一致性 #

这是最容易被忽略但高频触发的问题：本地系统（Windows/macOS）默认大小写不敏感，但Vercel的Linux环境是严格大小写敏感的。比如你本地导入$sections/About.svelte，但实际文件是about.svelte，本地能正常加载，但Vercel上会直接报错找不到文件。

• 操作步骤：
  • 核对所有导入语句中的文件名，和实际项目里的文件名称（包括后缀）完全一致
  • 比如用VS Code的"显示所有文件"功能，确认src/sections/下的文件确实是About.svelte而非about.svelte

2. 修正Vite别名的路径解析逻辑 #

你的别名配置里用了相对路径./src，在Vercel的构建环境中可能会因为工作目录差异导致解析错误。建议改用__dirname来确保路径基于配置文件的实际位置：

修改svelte.config.js：

import vercel from '@sveltejs/adapter-vercel';
import { fileURLToPath } from 'url';
import { dirname, resolve } from 'path';

// 获取当前配置文件的绝对路径
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: vercel(),
		vite: {
			resolve: {
				alias: {
					$src: resolve(__dirname, 'src'),
					$components: resolve(__dirname, 'src/components'),
					$sections: resolve(__dirname, 'src/sections')
				}
			}
		}
	}
};

export default config;

3. 确认Vercel输出目录配置正确 #

你提到用vercel_build_output覆盖了默认目录，要确保指向的是SvelteKit实际的构建输出目录。建议在项目根目录创建vercel.json，明确指定构建命令和输出目录：

{
  "buildCommand": "npm run build",
  "outputDirectory": ".svelte-kit/output"
}

SvelteKit默认的构建产物会生成在.svelte-kit/output，如果之前配置的路径错误，Vercel会找不到正确的文件资源。

4. 清理Vercel缓存重新部署 #

Vercel的构建缓存有时候会残留旧的文件路径信息，导致新的部署依然报错。操作步骤：

• 打开Vercel控制台，找到对应项目的部署记录
• 点击最新部署右侧的"Redeploy"按钮
• 在弹出的窗口中勾选"Clear build cache"，然后确认重新部署

5. 升级依赖版本排除兼容性问题 #

旧版本的@sveltejs/kit或@sveltejs/adapter-vercel可能存在Vercel部署时的路径解析bug，建议升级到最新稳定版：

npm install @sveltejs/kit@latest @sveltejs/adapter-vercel@latest

如果以上方法都没用，可以在Vercel的构建日志里添加调试命令，比如在package.json的build脚本前加一句：

"scripts": {
  "build": "ls -la /vercel/path0/src/sections/ && vite build"
}

这样能在构建日志里看到该目录下实际存在的文件，对比报错的路径是否一致，进一步定位问题。

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