编程知识 cdmana.com

Pourquoi n'importe quel chemin vers le projet vue ouvre la page principale

Alors que nous développons le Front End localement,En général, l'exécution npm run serve Lancement du projet,La console imprime le journal suivant:

  App running at:
  - Local:   http://localhost:7007/
  - Network: http://192.168.0.105:7007/

Accédez aux liens avec une bonne humeur http://localhost:7007/,Le Navigateur affiche également la page principale du projet comme prévu.
Quand tu te trompes de main,Plusieurs touches supplémentaires ont été tapées lors de l'accès au lien,Le lien devient ainsi:http://localhost:7007/asdf,Un retour.,woc??,Comment cela peut - il afficher la page d'accueil?!!Vous êtes presque sûr qu'aucun des projets ne s'appelle ‘/asdf’ Le routage de,Ça marche.?Commencez à essayer encore et encore,Essayez l'accès http://localhost:7007/qwer、http://localhost:7007/666666666666666666666…Sans exception,L'accès à n'importe quel chemin affiche la page principale.C'est incroyable..(Une pièce intérieurehhha~)

Retour au sujet,Pourquoi visitervue.N'importe quel chemin du projet peut ouvrir la page principale?
Pour répondre à cette question,Il faut d'abord connaître l'exécution locale npm run serve Heure,Qu'est - ce qui s'est passé?.RÉFÉRENCES:Analyse simplenpm run serveLes ordres
En résumé: npm run serve En fait, il y a eu un démarrage local webpack-dev-serverServeur.

Je me demande si vous avez trouvé, Quand on a emballé et déployé nginx Et ça arrive quand ,nginx.conf En général, la configuration est la suivante :

location / {
    
	root   html;
	try_files $uri $uri/ /index.html;
}

Par la droitenginx Débogage configuré ,La découverte est try_files La directive met en œuvre cette capacité , Il prend en charge quand aucun fichier n'est disponible , Rediriger toutes les requêtes vers un chemin . La configuration ci - dessus sera éventuellement redirigée vers /index.html.Pour plus de détails, voir:Nginx try_filesDirectives
J'ai compris.nginxC'est aussi le cas, Et cette capacité passe par un try_files Mise en œuvre de la configuration de l'instruction ,Je ne peux m'empêcher de penser,webpack-dev-server C'est comme nginx, Il devrait y avoir une configuration similaire .
Sur cette base,, J'ai fait une série d'explorations .

  1. En parlant de configuration , Ça vient du projet vue.config.js Début de la configuration,Nous avons découvert devServer Qui agit sur webpack-dev-server,Continuez à creuser.devServer;
  2. https://cli.vuejs.org/zh/config/#devserver
    Références aux documents devServer Prise en charge de tous les webpack-dev-server Configuration des options pour.Continuez à creuser.webpack-dev-server Options pour;
  3. https://webpack.docschina.org/configuration/dev-server/
    Concentrez - vous sur la section Configuration des ressources statiques ,Regarde autour de toi.,J'ai découvert staticOptions Cette option est douteuse ! Il est utilisé pour supporter des options avancées pour les fichiers statiques .Continuez à creuser.;
  4. https://webpack.docschina.org/configuration/dev-server/#staticOptions
    Références aux documents staticOptionsSera utilisé pourExpressDans le cadreexpress.static API, Donc les éléments configurables sont naturellement express.static Valeurs prises en charge,Continuez à creuser.
  5. http://expressjs.com/en/4x/api.html#express.static
    J'ai examiné plusieurs options pertinentes dans le document , En fait, je me suis concentré sur fallthrough, La seule définition des paramètres est la suivante :Let client errors fall-through as unhandled requests, otherwise forward a client error.,La traduction littérale est: Faire en sorte que l'erreur du client se produise en tant que demande non traitée , Sinon, erreur de transmission du client .
  6. Débogage multiple ,Tirer des conclusions.

J'ai testé différentes configurations ,Mise en service étape par étape…
L'empereur n'est pas responsable., Ça m'a vraiment fait essayer ! Le personnage principal est fallthrough Éléments de configuration.
QuanddevServer.staticOptions.fallthroughPourtrueHeure, L'accès au sous - chemin est automatiquement redirigé vers la page principale !
QuanddevServer.staticOptions.fallthroughPourfalseHeure, L'accès au sous - chemin signale une erreur !

Exemple direct:
Adresse d'accès au projet:http://localhost:7007/
Quand j'ai configuré devServer.staticOptions.fallthrough= true Au démarrage, L'accès au sous - chemin est automatiquement redirigé vers la page principale !
Insérer la description de l'image ici
Quand je configure devServer.staticOptions.fallthrough= false Au démarrage, L'accès au sous - chemin signale une erreur !
Insérer la description de l'image ici

Résumé

Demande.:Pourquoi visitervue.N'importe quel chemin du projet peut ouvrir la page principale?
Réponse:Parce que devServer.staticOptions.fallthrough Éléments de configuration,Cette configuration est par défaut à true.Quand il esttrueHeure, L'accès au sous - chemin est automatiquement redirigé vers la page principale ;Quand il estfalseHeure, L'accès au sous - chemin signale une erreur !
Invue.config.js La longueur réelle de la configuration est :

module.exports = {
    
  ...
  devServer: {
    
    staticOptions: {
    
      fallthrough: false
    },
  ...
}

reference:
Analyse simplenpm run serveLes ordres
vue.config.js Documents officiels
Webpack DevServer Documents officiels
https://webpack.js.org/configuration/dev-server/#staticoptions
http://expressjs.com/en/4x/api.html#express.static

版权声明
本文为[Markix]所创,转载请带上原文链接,感谢
https://cdmana.com/2022/01/202201080559015353.html

Scroll to Top