chemin des ressources de déploiement de vue cli 3

Vue CLI 3 est un outil d'échafaudage basé sur Webpack officiellement fourni par Vue.js, qui est utilisé pour créer rapidement des projets Vue.js. Avec la popularité de Vue.js dans les applications à grande échelle, Vue CLI 3 est également devenue un élément indispensable du développement front-end. Cependant, lors du déploiement réel de projets Vue CLI 3, de nombreux développeurs rencontreront des problèmes de chemin de ressources, empêchant le projet de s'exécuter normalement. Cet article présentera en détail les problèmes et les solutions du chemin des ressources de déploiement de Vue CLI 3.

1. Le chemin des ressources par défaut de Vue CLI 3

Le chemin des ressources par défaut dans Vue CLI 3 est un chemin relatif, c'est-à-dire "./". Cela signifie que Vue CLI 3 identifiera automatiquement le répertoire où se trouvent vos fichiers de ressources (tels que les images, CSS, JS, etc.) et les compilera dans des chemins relatifs pour garantir un accès correct dans n'importe quel environnement.

2. L'émergence de problèmes

Le chemin des ressources par défaut de Vue CLI 3 semble très pratique, mais vous rencontrerez toujours quelques problèmes dans l'application réelle. L'un des problèmes courants est que le chemin d'accès aux ressources empaquetées est incorrect, ce qui entraîne un mauvais affichage de la page Web. Ce problème est généralement dû au déploiement de projets dans différents environnements avec des chemins différents.

Par exemple, si le projet Vue CLI 3 est déployé dans le répertoire racine du serveur, son chemin de ressource doit être "/static/example.png". Cependant, si le projet Vue CLI 3 est déployé dans un sous-répertoire du serveur, son chemin de ressource deviendra « /subdir/static/example.png ». À l'heure actuelle, si vous utilisez le chemin relatif par défaut de Vue CLI 3, le fichier de ressources ne peut pas être lu correctement, ce qui entraîne un mauvais affichage de la page Web.

3. Solution

Afin de résoudre le problème des chemins de ressources, Vue CLI 3 propose diverses façons de définir les chemins de ressources. Nous pouvons choisir l'une des manières de résoudre le problème en fonction des besoins réels.

1. Utilisez le paramètre publicPath

Dans le fichier vue.config.js, vous pouvez utiliser le paramètre publicPath pour définir le chemin de la ressource. Le paramètre publicPath spécifie le chemin relatif du fichier de ressources empaqueté, qui peut être un chemin absolu ou un chemin relatif. Par exemple :

module.exports = {
  publicPath: '/subdir/'
};

Le code ci-dessus ajoute le préfixe "/subdir/" à tous les chemins de fichiers de ressources, de sorte que même s'ils sont déployés dans un sous-répertoire, les fichiers de ressources correspondants peuvent être chargés correctement.

2. Utiliser des variables d'environnement

Dans certains scénarios, nous pouvons avoir besoin de modifier dynamiquement le chemin des ressources en fonction des différents environnements de déploiement. À l’heure actuelle, nous pouvons utiliser des variables d’environnement pour résoudre le problème.

Dans le fichier de configuration vue.config.js, vous pouvez utiliser la variable d'environnement process.env.NODE_ENV pour déterminer l'environnement du projet en cours. Dans l'environnement de développement, nous pouvons définir le chemin de la ressource sur un chemin relatif. Dans l'environnement de production, nous pouvons définir le chemin des ressources sur un chemin absolu pour garantir que le projet peut charger correctement les fichiers de ressources correspondants dans différents environnements. Par exemple :

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-website/'
    : '/'
};

Dans le code ci-dessus, si le projet est dans un environnement de production, le chemin de la ressource est "/my-website/", sinon c'est un chemin relatif.

3. Utiliser CDN

Dans certains projets à fort trafic, nous devons utiliser CDN pour accélérer le chargement des fichiers de ressources. Pour le moment, nous pouvons utiliser la configuration webpack fournie par Vue CLI 3 pour définir le chemin CDN. Dans vue.config.js, vous pouvez personnaliser la configuration de Webpack via la méthode chainWebpack. Par exemple :

module.exports = {
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].cdn = 'https://cdn.example.com/';
        return args;
      });
  }
};

Dans le code ci-dessus, nous utilisons la méthode chainWebpack pour personnaliser la configuration du Webpack et définissons l'attribut cdn dans les paramètres de configuration du plug-in html-webpack-plugin sur le chemin CDN "https:// cdn.exemple.com/" .

4. Résumé

Vue CLI 3 est un puissant outil d'échafaudage qui peut créer rapidement des projets Vue.js. Cependant, dans les applications réelles, il peut y avoir des problèmes avec le chemin de ressources par défaut de Vue CLI 3, entraînant un échec du projet. Afin de résoudre ce problème, nous pouvons personnaliser le chemin des ressources en définissant le paramètre publicPath, en utilisant des variables d'environnement ou en utilisant CDN pour garantir que le projet peut charger correctement les fichiers de ressources correspondants dans différents environnements. Cet article présente ces solutions et espère être utile à tout le monde.

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!