Maison > Article > interface Web > 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.
Je crois que beaucoup de gens savent que vue-cli a deux emplacements pour placer les ressources statiques, qui sont src/assets
Dossier et static
Dossier, 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="./logo.png" 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.
É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="img" / alt="La différence entre les actifs d'alias de chemin personnalisé et les dossiers statiques dans vue-cli" > 或者p背景图形式: <p :style="{backgroundImage: 'url(' + img + ')'}"></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
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.
**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.
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 ?
À 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.
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. *
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-cliMots ultérieursCe 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!