Cloudflare Pages构建Vite React项目失败：路径解析错误求助

问题诊断与解决方案 #

1. 绝对路径别名配置错误 #

你当前vite.config.js中配置的"/src"是系统根目录的绝对路径，但Cloudflare Pages的构建容器会将项目代码放在/opt/buildhome/repo目录下，导致解析时找不到项目的src文件夹。

修正配置，使用Node.js的path模块解析项目根目录下的src：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      src: path.resolve(__dirname, './src'),
    },
  },
})

2. 文件扩展名与大小写问题 #

• 显式添加扩展名：Vite开发模式允许省略.jsx/.tsx扩展名，但CI/CD环境可能需要严格匹配。将导入语句从./Snackbar改为./Snackbar.jsx，确保与实际文件名一致。
• 检查大小写匹配：Cloudflare构建环境基于Linux，文件名区分大小写。如果你本地是Windows/macOS（默认不区分大小写），可能存在本地能运行但构建失败的情况，比如本地文件是Snackbar.jsx，但导入写的是./snackbar。

3. Cloudflare Pages构建配置修正 #

• 框架预设选择None（若有Vite选项可直接选择），不要选CRA或其他框架。
• 构建命令保持npm run build。
• 输出目录必须设为dist（Vite默认构建输出目录为dist，而非CRA的build）。

额外排查步骤 #

• 确认项目根目录的package.json中，scripts字段的build命令为vite build（Vite初始化项目默认配置）。
• 本地执行npm run build后，检查dist目录是否正常生成，确保本地构建无问题再推送到GitHub。
• 查看Cloudflare Pages构建日志，确认是否存在依赖安装失败的提示，比如依赖版本不兼容或缓存问题。

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