[英]How to dynamically load a Vue component after using require.context?
Currently I am loading all of my Vue components with require.context
, this searches my components
directory with a regex for .vue
files.目前,我正在使用require.context
加载我的所有 Vue 组件,这会使用正则表达式在我的components
目录中搜索.vue
文件。 This works fine but I would like to load async components as well with dynamic imports.这工作正常,但我想加载异步组件以及动态导入。
Currently when I use require.context
all files get loaded so even If I want to use a dynamic import my file is already loaded and nothing happens.目前,当我使用require.context
时,所有文件都会被加载,所以即使我想使用动态导入,我的文件也已经加载并且没有任何反应。
I need a way to exclude certain files from my require.context
call.我需要一种方法来从我的require.context
调用中排除某些文件。 I cannot dynamically create a regex because this does not work with 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'));
It seems the only way to do this is either manually declare all my components, which is a big hassle.似乎唯一的方法就是手动声明我的所有组件,这是一个很大的麻烦。
Or to create a static regex that skips files that have Async
in their name.或者创建一个 static 正则表达式,跳过名称中包含Async
的文件。 Which forces me to adopt a certain naming convention for components that are async.这迫使我对异步组件采用特定的命名约定。 Also not ideal.也不理想。
Would there be a better way to go about doing this? go 关于这样做会有更好的方法吗?
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
}, {})
Works with Vue 2.7 and Vue 3.适用于 Vue 2.7 和 Vue 3。
The lazy
mode forces requireContext
to return a promise . lazy
模式强制requireContext
返回 promise 。
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
}, {})
You can also use defineAsyncComponent({ loader: () => promise })
if you want to use the extra options of defineAsyncComponent
.如果您想使用defineAsyncComponent
的额外选项,您也可以使用defineAsyncComponent({ loader: () => promise })
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.