Explication détaillée de la résolution dans l'optimisation du chemin de vue

Lors de la création d'un projet vue+webpack via vue-cli, beaucoup d'entre eux ont déjà été configurés, mais le chemin peut être optimisé pour faciliter le développement. Cet article présente principalement la résolution de l'optimisation du chemin Vue. L'éditeur pense que c'est assez bon. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. solve.extensions

Dans webpack.base.conf.js, nous pouvons voir la configuration de résolution, où les extensions sont un tableau, comme indiqué ci-dessous :

extensions: ['.js', '.vue', '.json'],

Grâce à cette configuration, lorsque nous appliquons le composant via le routage dans le composant, il peut être plus pratique à appliquer, comme :

import Hello from '@components/Hello';

C'est-à-dire que nous pouvons référencer le composant Hello.vue sans ajouter le suffixe .vue. Si nous n'utilisons pas d'extensions, nous devons utiliser @components/Hello.vue pour introduire ce composant. . document.

2. solve.alias

Lorsque vous vous référencez entre les composants, cela peut ressembler à ceci :

import Hello from '../src.components/Hello';

Le chemin est relatif à la page actuelle. Mais si l’imbrication est plus complexe, elle sera plus difficile à écrire. Mais si on passe une configuration comme celle-ci :

 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@pages': path.join(__dirname, "..", "src", "pages"),
   "@components": path.join(__dirname, "..", "src", "components"),
   // 注意： 静态资源通过src，不能这么设置。
   // "@assets": path.join(__dirname, "..", "src", "assets"),
  }

où vue$ signifie introduire vue, on peut l'écrire comme ceci :

import Vue from 'vue'

De plus, nous pouvons citer directement @pages et @components, éliminant ainsi de nombreuses applications compliquées, et @ peut éliminer toute ambiguïté. Comme indiqué ci-dessous :

import Hello from '@components/Hello';

import App from '@pages/App'

À noter : dans webpack.config.js, nous ne pouvons pas utiliser ./ et . / sous forme de méthodes path, mais sous forme de path.join et __dirname pour représenter le chemin, sinon une erreur sera signalée.

De plus : Dans le composant, nous référencerons certains fichiers statiques, c'est-à-dire des fichiers sous static. Pour le moment, nous ne pouvons pas utiliser la configuration sous alias, mais devons utiliser la méthode de configuration générale.

Recommandations associées :

MySql utilise skip-name-resolve pour résoudre le problème de la lenteur du client de connexion réseau externe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!