我目前正在使用Vue 3和Inertia，当我试图在我的项目中导入和使用Highcharts时遇到了一个错误。我在下面附上了图片来说明我收到的错误消息。

错误1（Highcharts导入）：

[！[Highcharts导入错误]][1]

TS2345: Argument of type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to parameter of type 'Plugin<any>'.   Type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to type '((app: App<any>, ...options: any) => any) & { install?: ((app: App<any>, ...options: any) => any) | ((app: App<any>, options: any) => any) | undefined; }'.     Type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to type '(app: App<any>, ...options: any) => any'.       Types of parameters 'vue' and 'app' are incompatible.         Type 'App<any>' is missing the following properties from type 'typeof import("D:/sites/bfc/node_modules/vue/dist/vue")': compileToFunction, compile, defineCustomElement, useCssModule, and 146

字符串

错误2（代码编译）：

[！[代码编译错误]][2]

webpack compiled successfully
ERROR in ./resources/ts/app.ts:39:17
TS2345: Argument of type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to parameter of type 'Plugin<any>'.
  Type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to type '((app: App<any>, ...options: any) => any) & { install?: ((app: App<any>, ...options: any) => any) | ((app: App<any>, options: any) => any) | undefined; }'.
    Type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to type '(app: App<any>, ...options: any) => any'.
      Types of parameters 'vue' and 'app' are incompatible.
        Type 'App<any>' is missing the following properties from type 'typeof import("D:/sites/bfc/node_modules/vue/dist/vue")': compileToFunction, compile, defineCustomElement, useCssModule, and 146 more.
    37 |       .use<any>(store)
    38 |       .use<any>(i18n)
  > 39 |       .use<any>(HighchartsVue)
       |                 ^^^^^^^^^^^^^
    40 |       .use(Toaster, { position: 'top-right'})
    41 |       .use(VueTheMask)
    42 |       .use(ZiggyVue)

Found 1 error in 6553 ms.

型

复制步骤

1.在Vue 3组件中导入Highcharts。
1.在组件中使用Highcharts。
1.在代码编译期间观察上述错误。

其他信息

• Vue版本：^3.2.41
• 惯性版本：^1.0.6
• Highcharts版本：^11.2.0
• Highcharts-vue版本：^1.4.3

代码监听

请在下面找到发生错误的相关代码片段：

import '@/bootstrap';
import { createApp, h } from 'vue'
import { createInertiaApp, Head, Link } from '@inertiajs/vue3'
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import DefaultLayout from "@/Layouts/DefaultLayout.vue";
import store from "./store";
import i18n from "@/core/plugins/i18n";
import { initInlineSvg } from "@/core/plugins/inline-svg";
import HtmlClass from "@/core/services/LayoutService";
import { initializeComponents } from "@/core/plugins/keenthemes";
import vSelect from 'vue-select'
import globalFunctions from '@/core/functions/global-functions';
import Toolbar from "@/Components/toolbars/Toolbar.vue";
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';
import VueTheMask from 'vue-the-mask';
import Toaster from "@meforma/vue-toaster";
import HighchartsVue from 'highcharts-vue'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'EMRS';

createInertiaApp({
  title: (title) => `${title} - ${appName}`,
  resolve: async name => {
    let page =  await import(`./Pages/${name}`);
    page = page.default;
    if(page.layout === undefined){
        page.layout = DefaultLayout;
    }
    return page;
  },
  setup({ el, App, props, plugin }) {
    // @ts-ignore
      createApp({ render: () => h(App, props) })
      .use<any>(plugin)
      .use<any>(store)
      .use<any>(i18n)
      .use<any>(HighchartsVue)
      .use(Toaster, { position: 'top-right'})
      .use(VueTheMask)
      .use(ZiggyVue)
      .use(initInlineSvg)
      .use(globalFunctions)
      .component('Head', Head)
      .component('Link', Link)
      .component('Toolbar', Toolbar)
      .component('v-select', vSelect)
      .component('v-date-picker', VueDatePicker)
      .mount(el)
  },

})

// initialize html element classes
HtmlClass.init();
initializeComponents();

  [1]: https://i.stack.imgur.com/DDXkE.png
  [2]: https://i.stack.imgur.com/mN1ab.jpg

型