scènes à utiliser
De nombreux composants sont encapsulés dans un projet, et les composants correspondants sont chargés dynamiquement dans la page en fonction de l'interface renvoyant différents types de valeurs.
Description du problème
La méthode de chargement dynamique des composants est utilisée. Lorsque les composants sont introduits avec import(), ils peuvent être trouvés en écrivant directement les composants du chemin statique, mais les composants variables sont utilisés dans le chemin et sont introuvables, et l'erreur Erreur : Impossible de trouver le module est signalé.
le problème cause
La syntaxe import() est une syntaxe nouvellement introduite pour charger dynamiquement des modules dans ES6. Elle peut charger des modules lors de l'exécution et renvoyer un objet Promise, qui peut être utilisé pour charger différents modules.
Ainsi, la syntaxe import() elle-même est une fonction, dans laquelle une chaîne peut être transmise pour représenter le chemin du module à charger, mais les variables ne peuvent pas être transmises, car la valeur de la variable peut changer au moment de l'exécution, et le syntaxe import() Elle est déterminée au moment de la compilation, donc les variables ne peuvent pas être transmises.
solution
Utilisez la méthode require.ensure() de webpack pour introduire des composants, qui peuvent accepter des variables comme paramètres et renvoyer des objets Promise
return () => require.ensure([], (require) => require(`./components/${
type}.vue`))
J'espère que cela sera utile à tout le monde, et s'il existe un meilleur moyen, vous pouvez le partager ! ! !