폴더에서 모든 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
'sourcecode' 카테고리의 다른 글
종속성 주입을 통해 Vue.JS Vuex 저장 및 my api (0) | 2022.08.13 |
---|---|
모듈과 함께 vuexfire를 사용할 때 돌연변이를 처리하는 방법은 무엇입니까? (0) | 2022.08.13 |
Enter 키를 누르지 않고 칩을 사용하여 태그를 vuetify합니다. (0) | 2022.08.13 |
도커 이미지 - 유형.슬림형 vs 슬림형 vs 스트레칭 vs 알파인 (0) | 2022.08.13 |
어레이 응답을 vue.js 및 larabel로 표시하는 방법 (0) | 2022.08.13 |