SvelteKit+shadcn-svelte生产构建路径解析错误求助

核心排查与修复步骤 #

1. 强制路径大小写严格匹配 #

部分部署环境（Linux/Unix服务器）是大小写敏感的，而本地Windows/macOS默认不敏感。即便你同步过组件名，仍需：

• 用终端命令确认文件实际大小写：Linux/macOS用ls -l src/lib/components/ui/card/，Windows用dir /x src\lib\components\ui\card\
• 确保index.ts中的导入路径和文件名完全一致，比如文件是Card.svelte，导入不能写成./card.svelte

2. 配置SvelteKit路径解析规则 #

在svelte.config.js中明确组件别名并优化Vite解析逻辑：

import adapter from '@sveltejs/adapter-cloudflare'; // 替换为你使用的适配器
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    alias: {
      // 明确UI组件目录别名，避免路径歧义
      '$components/ui': 'src/lib/components/ui'
    },
    vite: {
      resolve: {
        preserveSymlinks: true,
        // 开启本地大小写敏感检测，提前发现问题
        caseSensitive: true
      }
    }
  }
};

export default config;

3. 规范组件导出语法 #

确保index.ts的导出逻辑无路径错误，以card组件为例：

// src/lib/components/ui/card/index.ts
// 精确导入导出，避免glob匹配的大小写问题
export { default as Card } from './Card.svelte';
export { default as CardContent } from './CardContent.svelte';
export { default as CardHeader } from './CardHeader.svelte';

4. 清理部署平台缓存 #

Cloudflare Pages、Vercel等平台会缓存构建依赖，可能残留旧路径信息：

• 在部署平台的项目设置中手动触发「清除构建缓存」
• 本地执行pnpm clean/npm run clean（若有对应脚本）后，重新提交代码部署

5. 本地预演生产构建 #

在本地模拟生产环境构建，提前排查问题：

# 执行生产构建命令
pnpm build
# 或
npm run build

如果本地构建也报错，可直接定位到具体路径问题；若本地正常，重点排查部署平台的缓存与环境差异。

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