Vue中如何将Vue.use与动态导入搭配使用？

你当前的写法存在问题：() => import("@syncfusion/ej2-vue-schedule") 返回的是一个返回Promise的函数，无法直接解构得到SchedulePlugin。动态import()语法返回的是Promise对象，需要等待异步加载完成后才能获取到模块导出的内容，再执行Vue.use注册。

正确写法1：async/await 形式 #

// 封装为异步加载函数，需要加载插件时调用即可
const registerSchedulePlugin = async () => {
  const { SchedulePlugin } = await import("@syncfusion/ej2-vue-schedule")
  Vue.use(SchedulePlugin)
}

// 调用示例
registerSchedulePlugin()

正确写法2：Promise.then 链式调用形式 #

不需要异步上下文时可以直接用这种写法：

import("@syncfusion/ej2-vue-schedule").then(({ SchedulePlugin }) => {
  Vue.use(SchedulePlugin)
})

注意事项 #

• 如果是在应用初始化阶段注册该插件，需要确保插件注册完成后再挂载根Vue实例，避免组件渲染时找不到插件提供的组件/方法
• 如果是按需在对应路由页面加载，可以把上述逻辑放在路由的beforeEnter钩子中执行，实现资源按需加载，减少首屏体积

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