Ralat MIME apl Vite React semasa memuatkan semula halaman

Ralat jenis MIME semasa memuat semula halaman dalam apl Vite React sering berlaku kerana pelayan tidak dikonfigurasikan dengan betul untuk mengendalikan penghalaan. Isu ini biasa berlaku dengan aplikasi satu halaman (SPA) seperti apl React di mana penghalaan sisi klien digunakan. Apabila anda memuatkan semula halaman pada laluan selain daripada akar, pelayan tidak tahu cara mengendalikannya, membawa kepada ralat jenis MIME atau ralat 404.

Berikut ialah beberapa penyelesaian untuk menyelesaikan isu ini:

1. Konfigurasikan Pelayan Pembangunan Vite

Jika anda menjalankan apl secara setempat dengan pelayan pembangunan Vite, anda boleh menambah konfigurasi asas dalam vite.config.js untuk membantu pelayan menyelesaikan laluan dengan betul.

// 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. Konfigurasikan Pelayan untuk Pengeluaran

Jika anda telah menggunakan apl dan menghadapi ralat ini dalam pengeluaran, pastikan pelayan anda disediakan untuk mengendalikan penghalaan pihak klien dengan sentiasa menyediakan index.html.

Contohnya, dalam:

• Nginx:

  server {
      listen 80;
      server_name yourdomain.com;

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

• Apache:

Tambahkan fail .htaccess pada folder binaan:

  <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):

Jika anda menggunakan Node.js dengan Express untuk menyampaikan apl, tambahkan perisian tengah berikut untuk menyediakan index.html untuk sebarang laluan yang tidak diketahui:

  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. Tambah Pilihan asas dalam Vite untuk Penggunaan Bukan akar

Jika apl anda digunakan dalam subdirektori (seperti https://example.com/app), tetapkan pilihan asas dalam vite.config.js:

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

4. Gunakan BrowserRouter react-router-dom

Jika anda menggunakan react-router-dom, pastikan anda menggunakan BrowserRouter (bukan HashRouter) untuk penghalaan pihak klien. BrowserRouter menggunakan API sejarah HTML5, yang Vite menyokong dengan baik.

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

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

export default App;

Ringkasan

Konfigurasi ini harus menyelesaikan isu jenis MIME dengan memastikan pelayan menyediakan index.html untuk laluan yang tidak diketahui, membolehkan Vite dan penghala apl anda mengendalikan navigasi dengan betul pada muat semula halaman.

Atas ialah kandungan terperinci Ralat MIME apl Vite React semasa memuatkan semula halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!