Récemment, j'ai découvert un problème avec le chemin d'empaquetage via vue+webpack

Ci-dessous, je partagerai avec vous un article qui résout le problème du chemin d'empaquetage vue+webpack. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

J'ai récemment écrit un petit projet vue. Je ne voulais pas le publier en tant que projet Web séparé, j'ai donc prévu de le mettre dans le dossier public du projet de ressources, j'ai donc rencontré quelques problèmes mineurs. Je vais les résumer ici.

Le chemin de la ressource est le suivant :

Le chemin d'accès configuré dans l'annuaire public est " /", de cette façon. Dans ce cas, notre chemin d'accès devient "nom de domaine/vue-demo". Lors de l'accès au programme, aucune erreur n'a été signalée, mais la page était vierge. Il n'y avait aucun problème avec les projets publiés de cette manière auparavant, mais que s'est-il passé cette fois-ci ?

Après une exploration minutieuse, j'ai découvert que vue-router causait des problèmes. En raison des besoins du projet, le comportement de défilement est utilisé. Le comportement de défilement doit activer le mode historique Il y a une telle phrase dans la documentation officielle de vue-router :

<.>

Lorsque vous utilisez le mode historique, l'URL ressemble à une URL normale, telle que http://votresite.com/user/id, et elle a également l'air bien !

Cependant, pour bien jouer à ce mode, vous avez également besoin d'un support de configuration en arrière-plan. Parce que notre application est une application client d'une seule page, si l'arrière-plan n'est pas configuré correctement, lorsque l'utilisateur accède directement à http://oursite.com/user/id dans le navigateur, 404 sera renvoyé, ce qui n'est pas beau .

Vous devez donc ajouter une ressource candidate côté serveur qui couvre toutes les situations : si l'URL ne correspond à aucune ressource statique, elle doit renvoyer la même page index.html, qui est la page de votre application. dépend.

Les chemins surveillés par notre vue-router sont toujours "/" et "/component", et les chemins naturels ne correspondent pas.

Nous devons donc modifier les routes et ajouter le nom du projet à chaque chemin, c'est-à-dire "/vue-demo". En même temps, afin de garantir que les fichiers de ressources sont correctement chargés, le publicPath. lors de l'emballage, il faut également ajouter "/vue-demo" ".

Fait ! !

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter le code de commutation aléatoire de l'identifiant WeChat via JavaScript (tutoriel détaillé)

Utilisation d'ES6 via WeakMap Résoudre le problème de fuite de mémoire (tutoriel détaillé)

Utiliser vue+element-ui+ajax pour implémenter une instance d'une table

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!