Déployer la page d'accès au serveur après avoir empaqueté le projet vue

Une fois le développement du projet Vue terminé, nous devons le conditionner et le déployer sur le serveur afin de pouvoir accéder à la page du projet dans un environnement réseau. Cet article présentera brièvement comment empaqueter et déployer des projets Vue, et fournira des solutions à certains problèmes courants afin que les lecteurs puissent déployer avec succès des projets Vue sur le serveur.

1. Packaging du projet Vue

Avant de commencer le packaging, vous devez installer Node.js et npm. Si vous avez terminé ces étapes, vous pouvez entrer dans le répertoire racine du projet Vue et exécuter les commandes suivantes dans l'ordre :

npm run build

Cette commande générera un dossier nommé "dist" dans le répertoire racine du projet. Dans le répertoire dist, il y aura un fichier "index.html" et un dossier "static", qui sont les fichiers principaux que nous devons télécharger sur le serveur.

2. Déployer sur le serveur

1. Télécharger sur le serveur

Vous pouvez utiliser l'outil FTP pour télécharger le dossier dist sur le serveur, ou utiliser la commande SSH pour transférer des fichiers vers le serveur. Ici, nous prenons l'exemple de FTP.

Avant de télécharger des fichiers, vous devez vous assurer que vous avez créé le répertoire racine de votre site Web sur le serveur. Téléchargez le dossier dist dans le répertoire racine de votre site Web, puis assurez-vous que le fichier index.html et le dossier statique se trouvent tous deux dans le répertoire racine du site Web.

2. Configuration du serveur

Avant de déployer le projet Vue sur le serveur, vous devez vous assurer que Node.js et npm sont installés sur le serveur.

Utilisez un client SSH pour vous connecter au serveur, accédez au répertoire racine du site Web et exécutez la commande suivante :

npm install -g http-server

Une fois l'installation terminée, exécutez la commande suivante pour démarrez le serveur :

http-server -p 8080

Cette commande démarrera un serveur sur le port local 8080. Vous pouvez accéder à votre site Web via http://adresse IP de votre serveur : 8080.

3. Résoudre les problèmes courants

Lors du déploiement de votre projet Vue sur le serveur, vous pouvez rencontrer des problèmes courants. Voici quelques problèmes possibles et leurs solutions :

1) Erreur 404 lors de l'accès

Si vous obtenez une erreur 404 lors de l'accès, c'est peut-être parce que votre serveur n'a pas configuré correctement le routage. Vous pouvez essayer d'utiliser le mode Hash pour le routage, modifier le fichier de configuration du projet Vue :

Modifier dans le fichier src/router/index.js :

const router = new VueRouter({
mode : 'hash',
routes : [

{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  component: About
}

]
})

Après modification, reconditionnez et déployez sur le serveur, puis visitez à nouveau.

2) Échec du chargement du fichier statique

Si votre fichier statique ne parvient pas à se charger, cela peut être dû au fait que votre serveur n'a pas le type MIME configuré correctement. Ce problème peut être résolu en ajoutant le contenu suivant au fichier de configuration Nginx :

location / {
add_header Content-Type "text/html";
add_header X-Content-Type-Options nosniff;
}

location ~* .( png|jpg|jpeg|gif|css|js|ico)$ {
add_header Content-Type "image/png";
add_header X-Content-Type-Options nosniff;
}

3) Autorisation d'accès au dossier du serveur problème

Si vous obtenez une erreur 403 lors du téléchargement d'un projet Vue sur le serveur, cela peut être dû au fait que votre serveur ne dispose pas des autorisations d'accès aux dossiers appropriées. Ce problème peut être résolu en exécutant la commande chmod pour modifier les autorisations du dossier :

nom du dossier chmod 755

IV Conclusion

Cet article présente brièvement comment empaqueter et déployer des projets Vue et résout certains problèmes possibles. J'espère que cet article pourra vous apporter de l'aide lors du déploiement de votre projet Vue sur le serveur. Au cours de l'opération spécifique, des ajustements spécifiques doivent être effectués en fonction du système d'exploitation du serveur et d'autres conditions. Je vous souhaite du succès dans la réalisation du déploiement de votre projet Vue.

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!