为什么使用 Webpack 代码拆分时我的 Vue 组件不显示？答案

【问题标题】：Why isn't my Vue component showing when using Webpack Code splitting?为什么使用 Webpack 代码拆分时我的 Vue 组件不显示？
【发布时间】：2019-08-13 18:35:57
【问题描述】：

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

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

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

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

export default {
  components: {
    todoList
  }
}

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

这是我在 DevTools 的网络选项卡中看到的。

【问题讨论】：

如果你点击 1.js 并查看它的响应，那是由 Webpack 生成的包。因此，它可能会将您的组件加载到其中一个捆绑包中。您的组件上是否有任何类型的条件渲染可能导致它无法渲染，例如v-if？
你用什么代码注册你的组件？
@NickG 我在父节点上有一个 v-if 语句用于加载 v-if="!isLoading"
@tony19 注册我的组件我只是在做以下components: {todoList}

标签： javascript laravel vue.js webpack vuejs2

【解决方案1】：

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

您可以使用简写返回，删除动态导入周围的语句括号（更适合简洁的语法和提高可读性）：

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

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

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

【讨论】：

干杯托尼，巨大的帮助！
@GarethJones 没问题 :)