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.pngLes URL avec le préfixe ~ seront traitées comme des requêtes de module, similaires à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') } }
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 Par exemple, la valeur par défaut ci-dessous est :// config/index.js module.exports = { // ... build: { assetsPublicPath: '/', assetsSubDirectory: 'static' } }
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!