Erreur MIME de l'application Vite React lors du rechargement de la page

Une erreur de type MIME lors du rechargement d'une page dans une application Vite React se produit souvent car le serveur n'est pas correctement configuré pour gérer le routage. Ce problème est courant avec les applications monopage (SPA) telles que les applications React où le routage côté client est utilisé. Lorsque vous rechargez la page sur une route autre que la racine, le serveur ne sait pas comment la gérer, entraînant des erreurs de type MIME ou des erreurs 404.

Voici quelques solutions pour résoudre ce problème :

1. Configurez le serveur de développement Vite

Si vous exécutez l'application localement avec le serveur de développement de Vite, vous pouvez ajouter une configuration de base dans vite.config.js pour aider le serveur à résoudre correctement les chemins.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/', // Ensure this points to the correct base
  server: {
    open: true,
    // Configure server to return index.html for unknown routes
    hmr: true,
  },
});

2. Configurez le serveur pour la production

Si vous avez déployé l'application et rencontrez cette erreur en production, assurez-vous que votre serveur est configuré pour gérer le routage côté client en servant toujours index.html.

Par exemple, dans :

• Nginx :

  server {
      listen 80;
      server_name yourdomain.com;

      location / {
          root /path/to/your/build;
          try_files $uri /index.html;
      }
  }

• Apache :

Ajoutez un fichier .htaccess au dossier build :

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>

• Express (Node.js) :

Si vous utilisez Node.js avec Express pour servir l'application, ajoutez le middleware suivant pour servir index.html pour toutes les routes inconnues :

  const express = require('express');
  const path = require('path');
  const app = express();

  app.use(express.static(path.join(__dirname, 'dist')));

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
  });

  const PORT = process.env.PORT || 3000;
  app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

3. Ajouter une option de base dans Vite pour les déploiements non root

Si votre application est déployée dans un sous-répertoire (comme https://example.com/app), définissez l'option de base dans vite.config.js :

// vite.config.js
export default defineConfig({
  base: '/app/', // Adjust according to your deployment path
  plugins: [react()],
});

4. Utilisez le BrowserRouter de React-Router-dom

Si vous utilisez réagir-router-dom, assurez-vous que vous utilisez BrowserRouter (et non HashRouter) pour le routage côté client. BrowserRouter utilise l'API d'historique HTML5, que Vite prend bien en charge.

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* your app routes here */}
    </BrowserRouter>
  );
}

export default App;

Résumé

Ces configurations devraient résoudre le problème de type MIME en garantissant que le serveur sert index.html pour les itinéraires inconnus, permettant ainsi à Vite et au routeur de votre application de gérer correctement la navigation lors des rechargements de page.

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!