我想要从文件中加载组件而不是在app.js
中定义它们,但我也想要进行延迟加载,因此尝试将两者结合起来。
所以一个延迟加载的组件定义将会像下面这样:
Vue.component(
'carousel',
() => import(
/* webpackChunkName: "carousel" */
'./components/carousel.vue'
)
);
使用文件注册组件的方式如下:
const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
我该如何合并这些内容?
我的当前尝试如下,但是当然我没有包括webpackChunkName
,因为我不知道怎么做:
const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], () => import(files(key)) ));
然而,这并不起作用,我只会收到一个错误提示:
警告:./resources/js/app.js 9:11-29 严重依赖项:一个依赖项的请求是表达式 @ multi ./resources/js/app.js ./resources/sass/index.sass