如何使用 webpack2 在 vuejs2 中呈现异步组件

Question

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

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

但是出现这个错误

Error: Loading chunk 0 failed. at HTMLScriptElement.onScriptComplete (app.js:99)

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

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 option to false. see Release Notes

How to render async-component in vuejs2 with webpack2