Comment utiliser les fichiers de ressources vue2.0 et les fichiers statiques

Cette fois, je vais vous montrer comment utiliser les actifs du fichier de ressources vue2.0 et statiques. Quelles sont les précautions lors de l'utilisation des actifs du fichier de ressources vue2.0 et statiques. Voici un cas pratique. jetez un oeil.

RessourcesTraitement des fichiers

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 Webpackées

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” , sont tous des chemins de ressources relatifs, qui seront analysés 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 du 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 mettre sous /src/assets : vous pouvez organiser la structure des fichiers en fonction de l'utilisation de 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'). Vous pouvez utiliser ce préfixe si vous souhaitez profiter de la configuration du traitement 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érence 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 un contenu plus passionnant, veuillez. faites attention aux autres sites Web chinois php.

Lecture recommandée :

Comment utiliser JS pour ajouter dynamiquement des balises HTML

Comment utiliser JS pour obtenir et modifier saisir du texte Données du cadre

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!