使用AWS Amplify部署Vite项目时@fullcalendar模块解析失败求助

问题根源 #

你的Vite配置中build.rollupOptions.external配置了@fullcalendar/core和@fullcalendar/daygrid，这会告诉Rollup将这些包标记为外部依赖，不会把它们打包到最终的构建产物中。浏览器运行时无法找到这些未被打包的模块，因此抛出模块解析错误。本地运行正常是因为Vite开发服务器会直接从node_modules加载依赖，而部署到Amplify后，没有对应的全局依赖或CDN引入，导致找不到模块。

解决方案 #

1. 移除Rollup外部依赖配置 #

修改vite.config.js，删除rollupOptions.external中的@fullcalendar相关条目：

build: {
  sourcemap: false,
  outDir: 'dist',
  rollupOptions: {
    // 移除外部依赖配置，让Rollup正常打包@fullcalendar包
    // external: ["@fullcalendar/core", "@fullcalendar/daygrid"],
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return id.toString().split('node_modules/')[1].split('/')[0].toString();
        }
        if (id.includes('@fullcalendar')) {
          console.log('Resolving FullCalendar module:', id);
        }
      }
    }
  }
}

2. 清理不必要的依赖预构建排除项 #

optimizeDeps.exclude中的chunk名称是Vite构建时自动生成的临时标识，手动排除会干扰依赖预构建流程，建议移除该配置：

// 移除以下不必要的排除配置
// optimizeDeps: {
//   exclude: [
//     'chunk-LG6VQEW3',
//     'chunk-OLITY7PF',
//     'chunk-3WLOWADN'
//   ]
// },

3. 重新构建并部署 #

• 执行npm run build重新生成dist目录
• 将更新后的dist目录部署到AWS Amplify

验证步骤 #

本地构建完成后，可通过以下方式验证：

• 检查dist/assets目录下的js文件，确认@fullcalendar相关代码已被打包
• 用静态服务器启动dist目录（如npx serve dist），确认项目能正常运行，避免再次部署出错

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