webpack 如何在使用require.context后动态加载Vue组件？

34gzjxbg 于 2022-11-30 发布在 Webpack

关注(0)|答案(2)|浏览(288)

目前我用require.context加载我所有的Vue组件，这用正则表达式搜索我的components目录中的.vue文件。这工作正常，但我想用动态导入加载异步组件。
目前，当我使用require.context时，所有文件都被加载，所以即使我想使用动态导入，我的文件也已经被加载，什么都没有发生。
我需要一种方法来从我的require.context调用中排除某些文件。我不能动态创建正则表达式，因为这不适用于require.context。

// How I currently load my Vue components.

const components = require.context('@/components', true, /[A-Z]\w+\.vue$/);

components.keys().forEach((filePath) => {
    const component = components(filePath);
    const componentName = path.basename(filePath, '.vue');

    // Dynamically register the component.
    Vue.component(componentName, component);
});

// My component that I would like to load dynamically.
Vue.component('search-dropdown', () => import('./search/SearchDropdown'));

似乎唯一的方法是手动声明我所有的组件，这是一个很大的麻烦。
或者创建一个静态正则表达式，跳过名称中包含Async的文件。这迫使我对异步组件采用特定的命名约定。同样不理想。
有没有更好的方法来做这件事？

webpack

来源：https://stackoverflow.com/questions/50023284/how-to-dynamically-load-a-vue-component-after-using-require-context

2条答案

按热度按时间

rqqzpn5f1#

const requireContext = require.context('./components', false, /.*\.vue$/)

const dynamicComponents = requireContext.keys()
    .map(file =>
        [file.replace(/(^.\/)|(\.vue$)/g, ''), requireContext(file)]
    )
    .reduce((components, [name, component]) => {
        components[name] = component.default || component
        return components
    }, {})

赞(0）回复(0）举报 2022-11-30

t9aqgxwy2#

与Vue 2.7和Vue 3配合使用。
lazy模式会胁迫requireContext传回承诺。

const { defineAsyncComponent } = require('vue')

const requireContext = require.context('./yourfolder', true, /^your-regex$/, 'lazy')
module.exports = requireContext.keys().reduce((dynamicComponents, file) => {
  const [, name] = file.match(/^regex-to-match-component-name$/)
  const promise = requireContext(file)
  dynamicComponents[name] = defineAsyncComponent(() => promise)
  return dynamicComponents
}, {})

如果要使用defineAsyncComponent的额外选项，也可以使用defineAsyncComponent({ loader: () => promise })。

赞(0）回复(0）举报 2022-11-30

我来回答

webpack 如何在使用require.context后动态加载Vue组件？

2条答案

相关问题

热门标签

最新问答