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

Posted 2023-02-23

【中文标题】使用自动注册的动态导入的 Vue 组件进行代码拆分

【英文标题】：Code splitting with auto-registered dynamically imported Vue components

【发布时间】：2019-08-14 19:08:54

【问题描述】：

我正在尝试使用this techniqe。简而言之，我正在尝试。我的文件结构是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 () return webpack_require("./resources/js/utils 惰性递归 ^.*$")("".concat(file)); 原因：错误：找不到模块'./MainNavbar.vue'

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

为什么我会收到这个错误？

【参考方案1】：

编辑：

我找到了适合我的 here：

const files = require.context('./', true, /\.vue$/i, 'lazy').keys();

files.forEach(file => 
    Vue.component(file.split('/').pop().split('.')[0], () => import(`$file`));
);

---

从错误消息来看，您的表达式 () => import($file) 需要预先添加上下文路径，因为您没有像 () => import('../components/MainNavbar.vue') 那样引用它

也许是这样的

const componentName = key.split('/').pop().split('.')[0]
Vue.component(file.split('/').pop().split('.')[0], () => import(`../components/$file`));

有效吗？