Analyse des actifs et des cas d'utilisation statiques

Cette fois, je vais vous apporter une analyse des cas d'utilisation des actifs et du statique Quelles sont les précautions d'utilisation des actifs et du statique Ce qui suit est un cas pratique, jetons un coup d'oeil.

Traitement des fichiers de ressources

Dans notre structure de projet, il existe deux chemins de fichiers de ressources, à savoir : src/assets et static/. Alors quelle est la différence entre les deux ?

Ressources Webpacked

Afin de répondre à cette question, nous devons d'abord comprendre comment Webpack gère les ressources statiques. Dans le composant *.vue, tous les modèles et CSS seront analysés par vue-html-loader et css-loader pour trouver l'URL de la ressource.

Par exemple, dans et background: url(./logo.png), "./logo.png", les deux sont des ressources relatives. être analysé en dépendances de module par Webpack.

Puisque logo.png n'est pas JavaScript, lorsqu'il est considéré comme une dépendance de module, nous devons utiliser url-loader et file-loader pour le traitement. Le modèle a déjà ces chargeurs configurés, vous pouvez donc utiliser des chemins relatifs/modules sans vous soucier des problèmes de déploiement. Étant donné que ces ressources peuvent être intégrées/copiées/renommées au moment de la construction, elles font essentiellement partie de votre code source. C'est pourquoi nous recommandons de placer les ressources statiques traitées par webpack sous le chemin /src comme les autres fichiers sources. En fait, vous n'avez même pas besoin de tous les placer sous /src/assets : vous pouvez organiser la structure des fichiers en fonction de l'utilisation des modules/composants. Par exemple, vous pouvez placer chaque composant et ses ressources statiques dans son propre répertoire.

Règles de gestion des ressources

Les URL relatives, par exemple ./assets/logo.png seront interprétées comme une dépendance de module. Ils seront remplacés par une URL générée automatiquement en fonction de la configuration de sortie de votre Webpack. Les URL sans préfixe, par exemple Assets/logo.png seront traitées comme des URL relatives et converties en ./assets/logo.png

Les URL avec le préfixe ~ seront traitées comme des requêtes de module, similaires à require( 'some- module/image.png'). Utilisez ce préfixe si vous souhaitez profiter de la configuration de gestion des modules de Webpack. Par exemple, si vous disposez d'une résolution de chemin pour les actifs, vous devez utiliser pour vous assurer que la résolution est correcte. Les URL relatives au répertoire racine, par exemple /assets/logo.png ne seront pas traitées

Récupérez le chemin de la ressource en Javascript

Afin de permettre à Webpack de renvoyer le correct Pour le chemin de la ressource, vous devez utiliser require('./relative/path/to/file.jpg'), qui sera analysé par le chargeur de fichiers, puis l'URL traitée sera renvoyée. Par exemple :

computed: {
 background () {
  return require('./bgs/' + this.id + '.jpg')
 }
}

Notez que dans l'exemple ci-dessus, toutes les images du chemin ./bgs/ seront incluses dans la version finale. En effet, Webpack ne peut pas deviner laquelle d'entre elles sera utilisée au moment de l'exécution. . Cela les inclura donc tous.

Ressources statiques « réelles »

A titre de comparaison, les fichiers sous static/ ne seront pas traités par Webpack : ils utilisent le même nom de fichier et sont copiés directement dans final chemin. Vous devez utiliser des chemins absolus pour référencer ces fichiers, en fonction de build.assetsPublicPath et build.assetsSubDirectory ajoutés dans config.js.

Par exemple, la valeur par défaut ci-dessous est :

// config/index.js
module.exports = {
 // ...
 build: {
  assetsPublicPath: '/',
  assetsSubDirectory: 'static'
 }
}

Tous les fichiers placés dans le répertoire static/ doivent être référencés à l'aide de l'URL absolue /static/[filename]. Si vous modifiez la valeur deassetSubDirectory en actifs, alors ces URL seront remplacées par /assets/[filename]

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. faites attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Comment transférer des données avec vue+props

Explication détaillée de l'utilisation de SQL Regular et mybatis régulier

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!