Quel est le problème avec le projet de création d'échafaudage Vue sans fichiers statiques ?

Avec le développement continu de la technologie front-end, de plus en plus de frameworks front-end sont introduits dans notre développement quotidien. Parmi ces frameworks, Vue.js est de plus en plus favorisé par les développeurs en tant que framework frontal rapide et léger. Lors du développement de Vue.js, nous utilisons généralement Vue CLI, l'échafaudage officiel, pour créer des projets. Cependant, dans certains cas, lorsque nous utilisons Vue CLI pour créer un projet, nous constatons que le dossier statique n'est pas généré, ce qui peut prêter à confusion pour les développeurs novices. Cet article vous expliquera comment résoudre ce problème couramment rencontré.

Commençons par comprendre pourquoi cela se produit. Lorsque nous créons un nouveau projet via Vue CLI, Vue CLI initialisera une configuration et une structure par défaut en tant que fichiers de base du projet. Ces fichiers sont contenus dans un dossier appelé src dans le répertoire racine du projet. Par défaut, Vue CLI ne génère pas pour nous de dossier contenant des fichiers statiques. Ainsi, lorsque nous essayons d'accéder à des ressources de dossiers statiques, telles que des fichiers CSS ou JavaScript, nous voyons généralement une page d'erreur 404.

Alors, comment ajouter des dossiers statiques aux projets créés par Vue CLI ? Deux méthodes différentes sont présentées ci-dessous :

Méthode 1 : Créer manuellement un dossier statique

Tout d'abord, nous devons créer manuellement un dossier nommé static dans le répertoire racine du projet. Ce dossier sera utilisé pour stocker les fichiers de ressources statiques. Vous pouvez créer des sous-dossiers sous le dossier statique pour stocker différents types de ressources statiques. Par exemple, nous pouvons créer un dossier CSS et y stocker tous les fichiers CSS ; nous pouvons également créer un dossier images pour stocker toutes les ressources d'images.

Pour faire savoir à Vue CLI que nous avons créé le dossier statique, nous devons trouver un fichier appelé vue.config.js dans le répertoire racine et l'ouvrir. Si vous n'avez pas le fichier, vous devrez le créer manuellement. Ajoutez le code suivant au fichier vue.config.js :

module.exports = {
  chainWebpack: config => {
    config
      .plugin('copy')
      .tap(args => {
        args[0][0].from = 'static'
        return args
      })
  }
}

Ce code indique à Vue CLI de copier tout le contenu du dossier statique à la racine du projet lors de la construction du projet. Maintenant, vous pouvez placer vos fichiers de ressources statiques dans le dossier statique et les utiliser normalement dans votre projet Vue.js.

Méthode 2 : Utilisez le dossier public

Vue CLI fournit également un autre moyen d'ajouter des fichiers statiques au projet. Cette méthode consiste à stocker les fichiers statiques dans le dossier public. Le dossier public est différent du dossier src et ne sera pas compilé ni intégré dans le projet final. Au lieu de cela, ils seront copiés dans le répertoire racine du projet final construit.

Pour utiliser cette méthode, il suffit de placer les fichiers de ressources statiques dans le dossier public et de les utiliser dans nos fichiers HTML comme ceci :

<link rel="stylesheet" href="<%= BASE_URL %>css/reset.css">

Il est à noter que dans Vue CLI 3, si nous stockons les fichiers statiques dans le dossier public, et nous n'avons besoin de faire aucune configuration dans le fichier vue.config.js.

Résumé

Pendant le processus de développement de Vue.js, nous utilisons généralement Vue CLI, l'échafaudage officiel, pour créer des projets. Après avoir créé le projet à l'aide de Vue CLI, si nous constatons que le dossier statique n'est pas généré, nous pouvons ajouter des fichiers statiques en créant manuellement un dossier statique ou en utilisant un dossier public. Si vous êtes un développeur novice qui apprend Vue.js, je pense que cet article peut vous être utile.

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!