使用Webpack代码拆分时，为什么我的Vue组件没有显示？

Question

我正在尝试使用Webpack的代码拆分功能来减少应用程序的加载时间，但我正在努力使其正常工作。控制台中没有错误，并且文件正在网络选项卡中加载。但是，Vue组件不会显示在屏幕上。在检查Chrome DevTools中的元素时，我看到<!----->，这表明该组件正在加载，但由于某种原因未显示。

我尝试使用Laravel Mix中的设置（即重命名块并更改目标文件夹），但是似乎没有任何方法可以解决问题。

这是我尝试导入其他组件的方式：

let todoList = () => {
    import( '../../components/dashboard/todoList' );
}

export default {
  components: {
    todoList
  }
}

我希望这将在需要时导入组件。它似乎正在引用拆分脚本，但是由于某种原因该组件未加载。我在这里做什么错了？

---

这是我在DevTools的“网络”选项卡中看到的内容。

Answer 1

todoList箭头函数需要返回动态导入的组件定义。目前，它什么也不返回。

您可以使用简写形式的返回，删除动态导入周围的语句括号（为简化语法和提高可读性而首选）：

export default {
  components: {
    todoList: () => import(/* ... */)
  }
}

...或在语句括号内添加return关键字：

export default {
  components: {
    todoList: () => {
      return import(/* ... */)
    }
  }
}