4
votes

Comment importer tous les composants Vue d'un dossier?

J'essaye de charger automatiquement tous les composants de ma vue à partir d'un dossier, qui fonctionne bien si je n'utilise pas vue " Composants Async ".

Une fois que j'essaye d'utiliser des Composants Async avec import .. J'obtiens cette erreur:

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

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

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

});

Mon code qui charge tous les composants, qui génère cette erreur:

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

Comment résoudre ce problème? ou y a-t-il un autre moyen d'accomplir cela?

webpack vue.js vue-component vuejs2

0 commentaires

3 Réponses :

0
votes

Au lieu de

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

Essayez

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

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

pas sûr à propos de la partie par défaut.

1 commentaires

Cela ne fait plus une importation asynchrone, ce qui est précisément ce que OP veut faire.

6
votes

D'accord, j'avais besoin d'ajouter "paresseux" dans:

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

puis:

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

1 commentaires

Ok, ce n'est nulle part à trouver, passer des heures à chercher, doit être mentionné n'importe où dans la documentation. Test maintenant, merci.

0
votes

J'ai dû fusionner la question avec une réponse ici pour obtenir cette solution finale:

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

Le troisième paramètre 'paresseux' a été ajouté à require .context () , et () => import () a été changé en () => ComponentContext () .

I peut voir les bundles dans l'onglet Réseau du volet des outils de développement, et je ne vois pas les bundles lorsque je navigue vers une page qui ne rend aucun des composants chargés automatiquement.

Par conséquent, Je suis raisonnablement certain que le code ci-dessus est un chargement automatique et une importation dynamique. Je confirmerai également que dans mon projet, j'utilise:

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

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

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

});

Notez où le mien est différent à ~ / components / common par rapport à ./ . Les besoins de votre projet seront probablement différents. Dans le mien, le ~ est un alias Webpack pour / resources / js , donc mon chemin complet serait ./resources/js/components/common. Le reste du code ci-dessus est un algorithme et peut rester intact.

0 commentaires