React Vite + JointJS 生产环境无法加载数据问题求助

核心问题分析 #

开发模式正常、生产模式无响应且提示加载数据失败，结合React+Vite+JointJS技术栈，大概率是JointJS依赖在生产打包时未被正确处理，或是生产环境资源路径、数据请求配置出错。

具体修复步骤 #

1. 调整Vite打包配置，兼容JointJS #

JointJS部分依赖属于CommonJS模块，Vite生产打包时可能被误优化，需在vite.config.js中显式声明：

export default defineConfig({
  // 其他原有配置
  build: {
    commonjsOptions: {
      include: [/jointjs/, /lodash/, /graphlib/]
    }
  },
  optimizeDeps: {
    include: ['jointjs']
  }
})

2. 修正生产环境资源路径 #

开发模式下Vite的资源路径默认适配本地服务，生产打包后需确保路径正确，修改vite.config.js的base配置：

export default defineConfig({
  base: './' // 若部署在子路径，改为对应路径，比如'/jedan-app/'
})

3. 检查环境变量配置 #

如果应用用了环境变量，确保.env.production中的变量以VITE_开头（Vite仅暴露该前缀的变量），比如：

VITE_API_URL=https://你的生产环境API地址

4. 修复数据加载逻辑 #

针对加载失败的问题，在请求代码中添加错误捕获，同时确认生产环境的API地址、跨域配置正确：

try {
  const res = await fetch(`${import.meta.env.VITE_API_URL}/data`)
  if (!res.ok) throw new Error('请求返回异常')
  const data = await res.json()
  // 数据处理逻辑
} catch (err) {
  console.error('加载数据失败:', err)
}

5. 确保JointJS初始化时机正确 #

生产模式下React渲染时机与开发模式有差异，需在组件挂载完成后初始化JointJS画布：

useEffect(() => {
  const graph = new joint.dia.Graph()
  const paper = new joint.dia.Paper({
    el: document.getElementById('joint-paper'),
    model: graph,
    width: 800,
    height: 600
  })
  // 组件卸载时清理
  return () => paper.remove()
}, [])

验证方法 #

执行npm run build完成打包后，用serve dist启动本地生产服务，模拟线上环境验证问题是否解决。

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