La différence entre les actifs d'alias de chemin personnalisé et les dossiers statiques dans vue-cli

Écrit devant :

Ceci est une brève introduction à plusieurs petits points de connaissances de vue-cli. Il convient aux étudiants qui débutent dans l'échafaudage vue-cli et qui ne connaissent pas grand-chose. à ce sujet, les grands ont fait un détour. Les amis dans le besoin peuvent faire une référence. Si vous l'aimez, vous pouvez l'aimer ou le suivre. J'espère que cela pourra aider tout le monde.

Traitement des ressources statiques :

La différence entre les actifs et les dossiers statiques

Je crois que beaucoup de gens savent que vue-cli a deux emplacements pour placer les ressources statiques, qui sont src/assetsDossier et staticDossier, beaucoup de gens peuvent ne pas comprendre clairement la différence entre les deux.

Les fichiers du répertoire assets seront traités et analysés en dépendances de module par webpack, et seuls les formulaires de chemin relatif sont pris en charge. Par exemple, dans <img src="/static/imghw/default1.png" data-src="./logo.png" class="lazy" alt="La différence entre les actifs d'alias de chemin personnalisé et les dossiers statiques dans vue-cli" >
et background: url(./logo.png), "./logo.png" est un chemin de ressource relatif qui sera résolu par Webpack en tant que dépendance de module. Les fichiers du répertoire

static/ ne seront pas traités par Webpack : ils seront copiés directement dans le répertoire final du packaging (la valeur par défaut est dist/static). Ces fichiers doivent être référencés à l'aide de chemins absolus, qui sont déterminés via les connexions build.assetsPublicPath et build.assetsSubDirectory dans le fichier config.js.

Tout fichier placé dans static/ doit être référencé comme un chemin absolu : /static/[filename].

Dans notre développement actuel, en général : static contient des fichiers qui ne changeront pas et les actifs contiennent des fichiers qui peuvent changer.

Comment référencer des images dans les données js

Étant donné que webpack référencera les images en tant que modules, vous devez utiliser require pour référencer les images dans js et vous ne pouvez pas utiliser directement le formulaire de chaînes.

js部分：
    data () {
        return {
             imgUrl: '图片地址',//错误写法 
            imgUrl: require('图片地址')//正确的写法
        }
}
template部分：
img标签形式：
<img  src="/static/imghw/default1.png"  data-src="img"  class="lazy"  : / alt="La différence entre les actifs d'alias de chemin personnalisé et les dossiers statiques dans vue-cli" >
或者p背景图形式：
<p :style="{backgroundImage: &#39;url(&#39; + img + &#39;)&#39;}"></p>

Après avoir parlé d'images, je veux juste mentionner la configuration liée à une image de vue-cli La configuration dans l'image ci-dessous signifie : effectuer une conversion base64 en dessous de l'image 10000b, donc s'il y en a. quelques comparaisons dans le projet Pour les petites icônes, il n'est pas nécessaire de traiter les sprites d'image

webpack+vue alias de chemin personnalisé

vue-cli utilise webpack, vous pouvez également utiliser la fonction d'alias personnalisé webpack pour personnaliser La fonction de définition d'aliasLorsque vous imbriquez des dossiers multicouches, vous n'avez pas besoin de trouver le chemin couche par couche. Vous pouvez directement utiliser l'alias personnalisé pour trouver l'emplacement du fichier.

Méthode de paramétrage :

**Adresse de paramétrage : **fichier webpack.base.conf.js sous le dossier build
Paramètres spécifiques :

resolve: {
    extensions: ['.js', '.vue', '.json'],
     alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'static':path.resolve(__dirname, '../static'),//增加这一行代码
        }
    },

Utilisation :

Lors de son utilisation, ajoutez un « ~ » devant, comme B dans la capture d'écran ci-dessous. Bien que Webstorm provoque ici une erreur, nous. peut l'ignorer, le code s'exécute normalement.

Interprétation :

Ici, 'static' reçoit une adresse, donc lorsque le chemin est introduit dans le programme, '~static' peut directement remplacer le chemin' .. /static', test personnel, même s'il y a plusieurs niveaux d'imbrication, le chemin peut être trouvé avec succès.

Nettoyer les plug-ins inutiles dans le projet

Beaucoup de gens sont comme moi, ils installent beaucoup de plug-ins au début, et puis finissent par ne pas les utiliser dans le projet. Tant de plug-ins ont été installés auparavant et vous avez même oublié quels plug-ins vous avez installés ?

package.json

À l'emplacement indiqué dans l'image ci-dessus, toutes les dépendances de modules installées par notre projet se trouvent dans ce fichier pageage.json. Lorsque vous avez besoin de trier vos propres dépendances, vous pouvez regarder dans ce fichier s'il y a des dépendances qui ne sont plus utiles. Vous pouvez utiliser la ligne de commande npm remove 模块名字 pour supprimer les modules inutiles.

La différence entre –save-dev et –save

Certaines des dépendances ci-dessus sont des modules qui ne sont utilisés que dans l'environnement de développement, et d'autres sont des modules sur lesquels vous continuerez à compter après le projet est mis en ligne. La différence entre eux est que lorsque nous installons habituellement les dépendances de module : --save-dev et --save

Lorsque vous utilisez --save-dev pour installer des dépendances, elles seront placées sous l'objet devDependencies de package.json On. au contraire, lorsque vous utilisez --save pour installer des dépendances, elles apparaîtront sous l'objet dépendances.

Résumé : * –save-dev est quelque chose sur lequel vous comptez lors du développement, –save est quelque chose sur lequel vous comptez toujours après la publication. *

J'ai déjà écrit deux articles sur la configuration de vue-cli. Les étudiants qui en ont besoin peuvent le lire :

Vous apprendre à utiliser l'échafaudage vue-cli

Faire référence à jQuery, bootstrap et utiliser sass et moins pour écrire du CSS dans l'échafaudage vue-cli

Mots ultérieurs

Ce qui précède est le contenu de cet article, qui représente certains de mes projets pratiques pour un période de temps Petite accumulation, il y aura du contenu dans la suite, car le projet est serré, je vous retrouverai peut-être plus tard.

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!