ViteJS 5与Apexcharts兼容问题：构建后环形图无法渲染

可能触发问题的原因 #

• Vite生产构建时的树摇优化误剔除了Apexcharts的核心依赖代码
• Flowbite与Apexcharts在生产构建流程中存在路径解析冲突
• 动态渲染的图表组件未被Vite正确识别并打包

分步解决办法 #

1. 调整Vite配置，保护核心依赖不被误优化 #

在项目根目录的vite.config.js（或.ts）中添加以下配置，强制Vite将Apexcharts和Flowbite加入预优化列表：

import { defineConfig } from 'vite';
import rubyPlugin from 'vite-plugin-ruby';

export default defineConfig({
  plugins: [rubyPlugin()],
  optimizeDeps: {
    include: ['apexcharts', 'flowbite-react']
  },
  build: {
    commonjsOptions: {
      include: [/apexcharts/, /flowbite-react/, /node_modules/]
    }
  }
});

2. 修正组件导入方式，确保全局依赖可用 #

在使用环形图的React组件中，显式导入并注册Apexcharts全局实例：

import { ApexChart } from 'flowbite-react';
import ApexCharts from 'apexcharts';

// 手动挂载全局实例，避免生产环境丢失依赖
if (typeof window !== 'undefined') {
  window.ApexCharts = ApexCharts;
}

export default function RingChart() {
  const chartOptions = {
    // 你的Flowbite环形图配置
  };

  return <ApexChart options={chartOptions} series={[40, 60]} type="donut" />;
}

3. 核对Vite Rails的构建路径配置 #

在config/initializers/vite.rb中确认输出路径配置正确，避免生产环境资源加载失败：

ViteRuby.configure do |config|
  config.build_output_dir = 'dist'
  config.public_output_dir = 'vite'
  config.dev_server_port = 3036
end

4. 同步依赖版本并重新构建 #

执行命令更新依赖，确保版本兼容性：

npm update apexcharts flowbite-react

之后重新执行构建：

vite build

额外排查方向 #

• 打开浏览器开发者工具，检查控制台是否有JS报错或资源404提示
• 查看Vite构建日志，确认apexcharts相关chunk是否被正常生成
• 临时禁用Vite生产压缩（在build.minify设为false），测试是否为压缩导致的代码异常

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