Vue懒加载路由下FusionCharts报错问题求助

问题核心 #

路由懒加载拆分代码chunk后，FusionCharts默认动态加载fusioncharts.charts.js模块时，请求路径解析错误导致404，进而触发ChunkLoadError。本质是：你当前仅引入了FusionCharts核心、导出及时间序列模块，但侧边栏图表依赖的charts模块未被显式引入，且路由懒加载后的chunk路径配置与FusionCharts动态加载逻辑不匹配。

解决方案 #

1. 显式引入并注册charts模块 #

手动引入依赖的fusioncharts.charts模块并完成注册，避免FusionCharts动态加载该文件：

import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts'; // 新增引入charts模块
import Exports from 'fusioncharts/fusioncharts.excelexport';
import TimeSeries from 'fusioncharts/fusioncharts.timeseries';

// 注册所有模块到FusionCharts核心
Charts(FusionCharts);
Exports(FusionCharts);
TimeSeries(FusionCharts);

const vueFusionCharts = VueFusionChartsComponent(FusionCharts, Exports, TimeSeries);
FusionCharts.options['license']({
    key: process.env.FUSIONCHARTS_KEY,
    creditLabel: false,
});

2. 修正Webpack publicPath配置 #

如果项目基于Vue CLI，在vue.config.js中配置与路由前缀匹配的publicPath，确保动态加载的chunk路径正确：

module.exports = {
  // 生产环境对应你的路由前缀/v2/108967/，开发环境用根路径
  publicPath: process.env.NODE_ENV === 'production' ? '/v2/108967/' : '/'
};

3. 禁用FusionCharts自动加载模块 #

若上述方法无效，直接关闭FusionCharts的动态模块加载机制，强制所有依赖模块手动引入：

import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import Exports from 'fusioncharts/fusioncharts.excelexport';
import TimeSeries from 'fusioncharts/fusioncharts.timeseries';

// 禁用自动加载模块
FusionCharts.options.autoLoadModules = false;

// 注册所有需要的模块
Charts(FusionCharts);
Exports(FusionCharts);
TimeSeries(FusionCharts);

const vueFusionCharts = VueFusionChartsComponent(FusionCharts, Exports, TimeSeries);
FusionCharts.options['license']({
    key: process.env.FUSIONCHARTS_KEY,
    creditLabel: false,
});

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