Explication détaillée de la différence entre les actifs des fichiers de ressources vue2.0 et les fichiers statiques

Cet article présente principalement la différence entre les actifs du fichier de ressources vue2.0 et les fichiers statiques. Maintenant, je le partage avec vous et vous donne une référence.

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 6b1107076a21b84c95dbb8e2465f1198 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 2aee3c5bbfa6ccdf4fd14f787793fd55 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 sous le chemin ./bgs/ seront incluses dans la version finale. car Webpack ne peut pas deviner lequel d'entre eux sera utilisé au moment de l'exécution, ils sont donc tous inclus.

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, Copiez directement au chemin final. 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 suivante est :

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

Tous les fichiers placés dans le répertoire static/ doivent être utilisés référencés par le URL absolue /statique/[nom de fichier]. Si vous modifiez la valeur deassetSubDirectory en actifs, alors ces URL deviendront /assets/[filename]

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir. .

Articles connexes :

Utiliser ajax pour modifier le contenu de la page et l'URL de la barre d'adresse sans actualiser

JavaScript basé sur Ajax Refresh pour afficher dynamiquement le contenu du fichier sur la page web

Méthode de traitement AJAX pour le XML renvoyé par le serveur

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!