使用自动注册的动态导入的Vue组件进行代码拆分

Question

我正在尝试使用this techniqe。简而言之，我正在尝试使用自动注册的动态导入的Vue组件进行代码拆分。我的文件结构是js/utils/vue.js和js/components/***.vue。

这是我的Vue组件的加载方式：

const files = require.context('../components', true, /\.vue$/i, 'lazy').keys();
files.forEach(file => {
    Vue.component(file.split('/').pop().split('.')[0], () => import(`${file}`));
});

但是会导致错误：

[Vue警告]：无法解析异步组件：function（）{返回webpack_require（“ ./ resources / js / utils lazy递归^。* $”）（“”。concat（file））;}原因：错误：找不到模块'./MainNavbar.vue'

手动注册组件，同时仍然使用动态导入。Vue.component('main-navbar', () => import('../components/MainNavbar.vue'));

我为什么会收到此错误？

Answer 1

根据错误消息判断，您的表达式() => import( $ {file} )必须在上下文路径之前，因为您没有像在() => import('../components/MainNavbar.vue')中那样引用它>

所以也许像

Vue.component(file.split('/').pop().split('.')[0], () => import(`../components/${file}`));
工程？