폴더에서 모든 Vue 구성 요소를 가져오려면 어떻게 해야 합니까?

폴더에서 모든 Vue 구성 요소를 가져오려면 어떻게 해야 합니까?

모든 vue 컴포넌트를 폴더에서 자동으로 로드하려고 하는데 vue "Async Components"를 사용하지 않으면 정상적으로 작동합니다.

Import에서 비동기 컴포넌트를 사용하려고 하면다음의 에러가 표시됩니다.

10:11-36 Critical dependency: the request of a dependency is an expression

모든 컴포넌트를 로드하여 다음 오류를 발생시키는 코드:

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

ComponentContext.keys().forEach((componentFilePath) => {

    const componentName = componentFilePath.split('/').pop().split('.')[0];
    Vue.component(componentName, () => import(componentFilePath));

});

이 문제를 해결하는 방법 또는 다른 방법이 있습니까?

좋아요, 'lazy'를 넣어야 했어요.

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

그 후:

Vue.component(componentName, () => ComponentContext(componentFilePath));

최종적인 해결책을 얻기 위해서, 이 질문에 대한 답을 조합할 필요가 있었습니다.

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

ComponentContext.keys().forEach((componentFilePath) => {

    const componentName = componentFilePath.split('/').pop().split('.')[0];
    Vue.component(componentName, () => ComponentContext(componentFilePath));

});

그'lazy'세 번째 파라미터가 추가되었습니다.require.context(),그리고.() => import()로 변경되었다.() => ComponentContext().

개발 도구 창의 네트워크 탭에 번들이 표시되고 자동 로드된 구성 요소를 렌더링하지 않는 페이지로 이동해도 번들이 표시되지 않습니다.

따라서 저는 위의 코드가 자동 로딩 및 동적 Import라고 합리적으로 확신합니다.또, 제 프로젝트에서 다음을 사용하고 있는 것을 확인합니다.

require.context('~/components/common', true, /\.vue$/i, 'lazy')

내 것이 다른 점을 주의해 주세요.~/components/common비교해서./프로젝트의 요구는 다를 수 있습니다.제가 봤을 때~의 웹 팩에일리어스입니다/resources/js그래서 나의 풀 패스는./resources/js/components/common위의 나머지 코드는 알고리즘이며 그대로 사용할 수 있습니다.

대신

Vue.component(componentName, () => import(componentFilePath));

해라

Vue.component(componentName, ComponentContext(componentFilePath));

또는

Vue.component(componentName, ComponentContext(componentFilePath).default);

기본 부품에 대해 확실하지 않습니다.

언급URL : https://stackoverflow.com/questions/54344164/how-to-import-all-vue-components-from-a-folder