Laravel+Vite引入ApexCharts出现ReferenceError问题求助

问题原因 #

Vite基于ES模块规范运行，你在app.js中import的ApexCharts仅属于该模块的私有变量，不会自动暴露到全局作用域，因此blade文件中的独立script模块无法访问到这个变量。

解决方案 #

方案1：将ApexCharts挂载到全局window对象 #

修改resources/js/app.js，在导入后将ApexCharts绑定到window：

import ApexCharts from 'apexcharts';
// 挂载到全局，让外部脚本可访问
window.ApexCharts = ApexCharts;

保存后重新运行npm run dev，你的blade测试代码无需修改即可正常执行。

方案2：将图表逻辑移入模块文件 #

把图表初始化代码从blade移到app.js或单独的JS模块中，避免全局变量依赖：
修改resources/js/app.js：

import ApexCharts from 'apexcharts';

// 等待DOM加载完成后初始化图表
document.addEventListener('DOMContentLoaded', () => {
    const chartEl = document.getElementById('test');
    // 仅当元素存在时执行，避免报错
    if (!chartEl) return;

    const options = {
        chart: { type: 'line' },
        series: [{ name: 'sales', data: [30,40,35,50,49,60,70,91,125] }],
        xaxis: { categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999] }
    };

    const chart = new ApexCharts(chartEl, options);
    chart.render();
});

然后blade文件只需保留资源引入和DOM元素：

@vite(['resources/js/app.js'])
<div id="test"></div>

方案3：在blade的script模块中直接导入 #

在blade的type="module"脚本中直接导入ApexCharts：

@vite(['resources/js/app.js'])

<div id="test"></div>

<script type="module">
    import ApexCharts from 'apexcharts';
    const options = {
        chart: { type: 'line' },
        series: [{ name: 'sales', data: [30,40,35,50,49,60,70,91,125] }],
        xaxis: { categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999] }
    };
    const chart = new ApexCharts(document.getElementById('test'), options);
    chart.render();
</script>

这种方式不需要修改app.js，默认Vite配置即可支持模块路径解析。

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