Comment optimiser vue+resolve

Cette fois je vais vous montrer comment optimiser vue+resolve, quelles sont les précautions pour l'optimisation vue+resolve, ce qui suit est un cas pratique, jetons un oeil.

Lors de la création d'un projet vue+webpack via vue-cli, beaucoup d'entre eux sont déjà configurés, mais le chemin peut être optimisé pour faciliter le développement.

1. résoudre.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 la route dans le composant, il peut être plus pratique à appliquer, comme :

import Hello from '@components/Hello';

Autrement dit, nous n'avons pas besoin d'ajouter le suffixe .vue au composant Hello.vue à référence Si nous n'utilisons pas d'extensions, nous devons utiliser @components/Hello.vue pour introduire ce fichier.

2. résoudre.alias

Lorsque les composants font référence les uns aux autres, 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 cette configuration :

 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"),
  }

Parmi eux, vue$ signifie introduire vue, qui peut s'écrire comme suit :

import Vue from 'vue'

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

import Hello from '@components/Hello';

import App from '@pages/App'

Il convient de noter : dans webpack.config.js, nous ne pouvons pas utiliser la méthode path de ../ et ./. Au lieu de cela, nous utilisons 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!