Laravel 8+Inertia+Vue项目中app.js导入Highcharts后模板无法调用咨询

你现在遇到的组件无法识别的核心原因有两个：一是Highcharts相关的导入语句完全没有写对（原来的导入路径是空字符串），二是插件注册的调用逻辑和传参存在问题，按照下面的步骤调整即可。

1. 安装对应依赖 #

在项目根目录执行命令安装所需包：
npm install highcharts highcharts-vue
注意要安装适配Vue3的highcharts-vue版本，不要选适配Vue2的旧版本。

2. 修正app.js的导入和注册逻辑 #

把原来空的HighCharts导入语句替换为正确的导入、初始化代码，并且把HighchartsVue插件通过use方法注册到应用实例上，所有插件注册操作必须放在mount()调用之前完成，否则全局注册的组件不会生效。
修正后的完整app.js参考如下：

require("./bootstrap");

import { createApp, h } from "vue";
// 替换原有空的导入
import Highcharts from "highcharts";
import HighchartsVue from "highcharts-vue";
// 按需引入需要的扩展模块，比如导出功能，不需要可以删掉
import exportingInit from "highcharts/modules/exporting";
import {
    App as InertiaApp,
    plugin as InertiaPlugin,
} from "@inertiajs/inertia-vue3";

// 初始化扩展模块
exportingInit(Highcharts);

const el = document.getElementById("app");

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    // 注册Highcharts插件，把初始化好的Highcharts实例传进去
    .use(HighchartsVue, { highcharts: Highcharts })
    .mount(el);

3. 模板调用的注意事项 #

全局注册完成后，你原来在模板里写的<highcharts :options="indexOptions"></highcharts>是可以直接识别的，注意几点：

• 传入的indexOptions对象要符合Highcharts的配置规范，必须包含chart类型、series数据等必填字段，否则图表不会正常渲染
• 如果遇到标签识别异常，可以把标签写法调整为<Highcharts :options="indexOptions" />，Vue的模板编译器对两种写法都兼容
• 如果不想全局注册，也可以在需要用图表的单文件组件里局部导入HighchartsVue的组件，在组件的components选项里注册后使用，效果和全局注册一致

容易踩的坑

• 千万不要把.use(HighchartsVue)写在.mount(el)之后，应用挂载完成后再做全局注册是不生效的
• 注册插件的时候要把加载了扩展模块的Highcharts实例作为参数传入，不然引入的导出、地图等扩展功能会失效

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