Une fois que vue3 est empaqueté et déployé, une erreur est signalée et résolue. La page d'accès index.html est vide, problème nginx404 après l'actualisation de la page

Une fois que vue3 est empaqueté et déployé, la page d'accès index.html est vide et le problème nginx404 se produit après l'actualisation de la page.

Question 1 : La page d'accès index.html est vide et le message d'avertissement préchargé est le suivant

The resource http://xxx.xxx/css/chunk-vendors.eed3e5ae.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Les indices sont préchargés avec des liens, mais ne sont pas utilisés pendant quelques secondes après l'événement de chargement de la fenêtre. Assurez-vous qu’il a une asvaleur appropriée et qu’il est volontairement préchargé. On en déduit que la page est vierge car certains fichiers préchargés n'ont pas été chargés.

Solution

Lors de la configuration de morceaux dans la configuration du webpack (vue.config.js), résolvez le problème de préchargement en ajoutant les paramètres ['chunk-vendors', 'chunk-common'], comme suit

// vue.config.js
{
    
    
  chunks: ['chunk-vendors', 'chunk-common']
}

Question 2 : Après l'empaquetage et le déploiement, l'interface est accessible et utilisée normalement, mais le problème nginx404 sera signalé lors de l'actualisation de l'interface ou de la modification de l'accès à la barre d'adresse.

Situation du projet : utilisez createWebHistory pour créer un historique afin d'obtenir l'effet de chemin d'accès sans #, mais vous avez constaté que le projet n'est pas configuré avec le transfert nginx. Dans le document vue-router, la configuration nginx doit être transmise à index.html lorsqu'elle est utilisée avec createWebHistory

Solution

Configurez le transfert nginx, comme suit

localtion / {
    
    
  ...
  ...
  try_files $uri $uri/ /index.html last;
}