vue.js - 如何使用 webpack2 在 vuejs2 中渲染异步组件

Question

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

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

但是得到这个错误

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

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

score 1 · Accepted Answer

你可以只使用一个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. 请参阅发行说明

1 回答 1