Vue中如何懒加载外部库pdfvuer？两种尝试方式均无效

当然可以实现，你之前的两种方式用错了场景，给你两种可行的实现方案：

方案一：点击事件内直接动态导入 #

在触发点击的函数里，通过await import()加载库并解构出目标方法，这样只有点击后才会请求pdfvuer的资源：

async function handlePdfLoad() {
  // 点击后才加载pdfvuer
  const { createLoadingTask } = await import('pdfvuer');
  // 正常调用方法
  const pdfTask = createLoadingTask('/path/to/your.pdf');
  // 后续处理PDF的逻辑...
}

方案二：封装懒加载函数（复用场景） #

如果需要多次调用这个方法，可以封装一个函数，确保只加载一次库：

// 缓存已加载的方法
let cachedCreateLoadingTask = null;

async function getCreateLoadingTask() {
  if (!cachedCreateLoadingTask) {
    const pdfvuerModule = await import('pdfvuer');
    cachedCreateLoadingTask = pdfvuerModule.createLoadingTask;
  }
  return cachedCreateLoadingTask;
}

// 点击事件中使用
async function handleClick() {
  const taskFn = await getCreateLoadingTask();
  const pdfTask = taskFn('/path/to/your.pdf');
  // 后续逻辑...
}

为什么之前的方式无效？ #

• defineAsyncComponent是用来懒加载Vue组件的，不是加载工具函数类的导出，所以你的第一种尝试不适用。
• 直接把createLoadingTask赋值为()=> import("pdfvuer")，得到的只是一个返回Promise的函数，不是实际的方法，必须await这个Promise并解构出createLoadingTask才能使用。

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