如何使用webpack2

时间:2017-11-07 10:04:03

标签: vue.js vuejs2 webpack-2 async-components

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

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

但是收到此错误

  

错误:加载块0失败。       在HTMLScriptElement.onScriptComplete(app.js:99)

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

1 个答案:

答案 0 :(得分: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