如何使用webpack2

Question

我想动态渲染特定组件，因此将其定义为async组件，如下所示：

Vue.component('AsyncComponent', function (resolve) {
  require(['./components/async-component.vue'], resolve)
});

但是收到此错误

  

错误：加载块0失败。       在HTMLScriptElement.onScriptComplete（app.js：99）

所以主要问题是块文件的路径没有指定任何地方，抛出404错误，是否还有任何webpack配置，我需要指定。提前谢谢。

Answer 1

您可以使用dynamic import：

const AsyncComponent = () => import ('./components/async-component.vue');

然后全球注册：

Vue.component('AsyncComponent', AsyncComponent);

或简单地说：

Vue.component('AsyncComponent', () => import('./components/async-component.vue');

如果您使用vue-loader 13或更高版本，除非您将esModule选项设置为false，否则无效。见Release Notes