Maison interface Web js tutoriel Explication détaillée du traitement vue-cli+webpack des ressources statiques et des étapes de packaging du webpack

Explication détaillée du traitement vue-cli+webpack des ressources statiques et des étapes de packaging du webpack

May 21, 2018 pm 01:47 PM
web webpack

Cette fois, je vous apporte une explication détaillée des étapes permettant à vue-cli+webpack de traiter les ressources statiques et l'empaquetage du webpack. Quelles sont les précautions pour que vue-cli+webpack traite les ressources statiques et le webpack. emballage. Voici des cas pratiques, jetons un coup d’œil.

Les pièges du packaging webpack via Vue-cli

L'échafaudage construit par Vue-cli pour le projet Vue est en effet très pratique, mais l'empaquetage est simple. Une page blanche apparaît ou la ressource statique correspondante ne peut pas être chargée.

Je l'ai résolu en changeant le AssetsPublicPath de index.js sous project/config en './' et en le transformant en chemin relatif.

cd vue demo 
 npm run dev //运行程序 
npm run bulid //webpack打包
Copier après la connexion

Traitement des ressources statiques

Vous remarquerez peut-être que dans les projets qui combinent vue-cli avec webpack, nous avons généralement deux chemins de deux ressources statiques : src/assets et static/ Quelle est la différence entre elles ? Cet article présente principalement comment vue-cli et webpack sont combinés pour gérer les ressources statiques. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Ressources packagé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 modules CSS sont analysés par vue-html-loader et css-loader pour trouver l'URL du chemin.

Par exemple, en <img src"./logo.png"> et en arrière-plan <a href="http://www.php.cn/wiki/892.html" target="_blank">arrière-plan<code><a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>: url(./logo.png) : url(./logo.png), "./logo.png" est un chemin relatif et sera chargé en tant que dépendance par Webpack.

Mais comme logo.png n'est pas JavaScript, donc s'il est considéré comme une fleur dépendante, nous devons l'analyser via le chargeur d'URL et le chargeur de fichiers. Ce modèle a déjà configuré le chargeur correspondant pour vous, vous n'avez donc généralement pas à vous soucier des problèmes de déploiement de chemin relatif.

Même si ces ressources peuvent être intégrées/copiées/renommées pendant le processus de construction, elles constituent toujours une partie importante du code source. C'est pourquoi nous vous recommandons de placer les ressources statiques dans un dossier /src séparé, comme les autres dossiers de ressources.

En fait, vous n'êtes pas obligé de tous les mettre dans /src/assets, vous pouvez les organiser et les utiliser en fonction de modules/composants. Par exemple, vous pouvez placer n'importe quel composant dans son propre répertoire et stocker des ressources statiques dans ce répertoire.

Règles d'introduction des ressources

Les chemins relatifs, tels que ./assets/logo.png seront analysés en dépendances de module. Ils seront remplacés par une URL générée automatiquement en fonction de la configuration de sortie de votre Webpack.

Un chemin sans préfixe, tel que assets/logo.png, est identique à un chemin relatif et est échappé vers ./assets/logo.png

Un chemin avec un préfixe ~ . ~ est considéré comme une demande de module, de la même manière que <a href="http://www.php.cn/wiki/136.html" target="_blank">require<code><a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>('some-module/image.png')('some-module/ image .png'). Chemin racine, tel que /assets/log.png

Obtenir le chemin de la ressource en JavaScript

computed: {
 background () {
 return require('./bgs/' + this.id + '.jpg')
 }
}
Copier après la connexion

Ce chemin de la ressource sera également fichier- Le chargeur traite et renvoie le chemin traité. Et Webpack chargera toutes les images du répertoire bgs en même temps.

Ressources statiques « réelles »

En revanche, aucun des fichiers en static/ ne sera traité par Webpack. Ils seront copiés directement dans le dossier cible et des chemins absolus doivent être utilisés pour référencer ces fichiers.

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 :

Explication détaillée des étapes permettant à php d'appeler l'interface Google pour générer un code QR

Explication détaillée des étapes d'utilisation du traitement d'image PHPThumb

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Tutoriel de démarrage VUE3 : empaquetage et création avec Webpack Tutoriel de démarrage VUE3 : empaquetage et création avec Webpack Jun 15, 2023 pm 06:17 PM

Vue est un excellent framework JavaScript qui peut nous aider à créer rapidement des applications Web interactives et efficaces. Vue3 est la dernière version de Vue, qui introduit de nombreuses nouvelles fonctionnalités et fonctionnalités. Webpack est actuellement l'un des packagers de modules et outils de construction JavaScript les plus populaires, qui peut nous aider à gérer diverses ressources dans nos projets. Cet article explique comment utiliser Webpack pour empaqueter et créer des applications Vue3. 1. Installez Webpack

Comment utiliser le caddy du serveur Web Nginx Comment utiliser le caddy du serveur Web Nginx May 30, 2023 pm 12:19 PM

Introduction à Caddy Caddy est un serveur Web puissant et hautement évolutif qui compte actuellement plus de 38 000 étoiles sur Github. Caddy est écrit en langage Go et peut être utilisé pour l'hébergement de ressources statiques et le proxy inverse. Caddy présente les principales caractéristiques suivantes : par rapport à la configuration complexe de Nginx, sa configuration originale de Caddyfile est très simple ; il peut modifier dynamiquement la configuration via l'AdminAPI qu'il fournit, il prend en charge la configuration HTTPS automatisée par défaut et peut demander automatiquement des certificats HTTPS ; et configurez-les ; il peut être étendu aux données Des dizaines de milliers de sites ; peut être exécuté n'importe où sans dépendances supplémentaires écrites en langage Go, la sécurité de la mémoire est plus garantie ; Tout d’abord, nous l’installons directement dans CentO

Protection en temps réel contre les barrages de blocage de visage sur le Web (basée sur l'apprentissage automatique) Protection en temps réel contre les barrages de blocage de visage sur le Web (basée sur l'apprentissage automatique) Jun 10, 2023 pm 01:03 PM

Le barrage de blocage du visage signifie qu'un grand nombre de barrages flottent sans bloquer la personne dans la vidéo, donnant l'impression qu'ils flottent derrière la personne. L'apprentissage automatique est populaire depuis plusieurs années, mais beaucoup de gens ne savent pas que ces fonctionnalités peuvent également être exécutées dans les navigateurs. Cet article présente le processus d'optimisation pratique des barrages vidéo. À la fin de l'article, il répertorie certains scénarios applicables. cette solution, dans l'espoir de l'ouvrir. mediapipeDemo (https://google.github.io/mediapipe/) montre le principe de mise en œuvre du calcul d'arrière-plan du serveur vidéo de téléchargement à la demande du barrage de blocage de visage grand public pour extraire la zone du portrait dans l'écran vidéo et la convertit en stockage SVG client pendant la lecture de la vidéo. Téléchargez svg depuis le serveur et combinez-le avec barrage, portrait.

Comment configurer nginx pour garantir que le serveur frps et le port de partage Web 80 Comment configurer nginx pour garantir que le serveur frps et le port de partage Web 80 Jun 03, 2023 am 08:19 AM

Tout d’abord, vous aurez un doute, qu’est-ce que le frp ? En termes simples, frp est un outil de pénétration intranet. Après avoir configuré le client, vous pouvez accéder à l'intranet via le serveur. Maintenant, mon serveur a utilisé nginx comme site Web et il n'y a qu'un seul port 80. Alors, que dois-je faire si le serveur FRP souhaite également utiliser le port 80 ? Après l'interrogation, cela peut être réalisé en utilisant le proxy inverse de nginx. A ajouter : frps est le serveur, frpc est le client. Étape 1 : Modifiez le fichier de configuration nginx.conf sur le serveur et ajoutez les paramètres suivants à http{} dans nginx.conf, server{listen80

Utilisation de Jetty7 pour le traitement du serveur Web dans le développement d'API Java Utilisation de Jetty7 pour le traitement du serveur Web dans le développement d'API Java Jun 18, 2023 am 10:42 AM

Utilisation de Jetty7 pour le traitement du serveur Web dans le développement JavaAPI Avec le développement d'Internet, le serveur Web est devenu l'élément central du développement d'applications et est également au centre de l'attention de nombreuses entreprises. Afin de répondre aux besoins croissants des entreprises, de nombreux développeurs choisissent d'utiliser Jetty pour le développement de serveurs Web, et sa flexibilité et son évolutivité sont largement reconnues. Cet article explique comment utiliser Jetty7 dans le développement JavaAPI pour We

Comment implémenter la validation de formulaire pour les applications Web à l'aide de Golang Comment implémenter la validation de formulaire pour les applications Web à l'aide de Golang Jun 24, 2023 am 09:08 AM

La validation du formulaire est un maillon très important dans le développement d'applications Web. Elle permet de vérifier la validité des données avant de soumettre les données du formulaire afin d'éviter les failles de sécurité et les erreurs de données dans l'application. La validation de formulaire pour les applications Web peut être facilement implémentée à l'aide de Golang. Cet article explique comment utiliser Golang pour implémenter la validation de formulaire pour les applications Web. 1. Éléments de base de la validation de formulaire Avant de présenter comment implémenter la validation de formulaire, nous devons savoir quels sont les éléments de base de la validation de formulaire. Éléments de formulaire : les éléments de formulaire sont

Comment activer l'accès administratif à partir de l'interface utilisateur Web du cockpit Comment activer l'accès administratif à partir de l'interface utilisateur Web du cockpit Mar 20, 2024 pm 06:56 PM

Cockpit est une interface graphique Web pour les serveurs Linux. Il est principalement destiné à faciliter la gestion des serveurs Linux pour les utilisateurs nouveaux/experts. Dans cet article, nous aborderons les modes d'accès à Cockpit et comment basculer l'accès administratif à Cockpit depuis CockpitWebUI. Sujets de contenu : Modes d'entrée du cockpit Trouver le mode d'accès actuel au cockpit Activer l'accès administratif au cockpit à partir de CockpitWebUI Désactiver l'accès administratif au cockpit à partir de CockpitWebUI Conclusion Modes d'entrée au cockpit Le cockpit dispose de deux modes d'accès : Accès restreint : il s'agit de la valeur par défaut pour le mode d'accès au cockpit. Dans ce mode d'accès vous ne pouvez pas accéder à l'internaute depuis le cockpit

PHP est-il front-end ou back-end dans le développement Web ? PHP est-il front-end ou back-end dans le développement Web ? Mar 24, 2024 pm 02:18 PM

PHP appartient au backend du développement Web. PHP est un langage de script côté serveur, principalement utilisé pour traiter la logique côté serveur et générer du contenu Web dynamique. Par rapport à la technologie front-end, PHP est davantage utilisé pour les opérations back-end telles que l'interaction avec les bases de données, le traitement des demandes des utilisateurs et la génération du contenu des pages. Ensuite, des exemples de code spécifiques seront utilisés pour illustrer l'application de PHP dans le développement back-end. Tout d'abord, regardons un exemple de code PHP simple pour se connecter à une base de données et interroger des données :

See all articles