Vite React 應用程式重新載入頁面時出現 MIME 錯誤-js教程-PHP中文網

Vite React 應用程式重新載入頁面時出現 MIME 錯誤

Susan Sarandon

發布： 2024-12-18 12:41:10

原創

266 人瀏覽過

Vite React app MIME error when reloading the page

在 Vite React 應用程式中重新載入頁面時經常會出現 MIME 類型錯誤，因為伺服器沒有正確配置來處理路由。此問題在使用用戶端路由的單頁應用程式 (SPA)（例如 React 應用程式）中很常見。當您在根目錄以外的路由上重新載入頁面時，伺服器不知道如何處理它，從而導致 MIME 類型錯誤或 404 錯誤。

以下是解決此問題的一些解決方案：

1.配置Vite開發伺服器

如果您在 Vite 的開發伺服器本地運行應用，您可以在 vite.config.js 中新增基本配置，以協助伺服器正確解析路徑。

// 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. 配置生產伺服器

如果您已部署應用程式並在生產中遇到此錯誤，請確保您的伺服器設定為始終提供index.html來處理客戶端路由。

例如，在：

Nginx：

  server {
      listen 80;
      server_name yourdomain.com;

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

登入後複製

阿帕契:

將 .htaccess 檔案新增至建置資料夾：

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

如果您使用 Node.js 和 Express 來為應用程式提供服務，請新增以下中間件來為任何未知路由提供 index.html：

  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. Vite 新增非 root 部署的基礎選項

如果您的應用程式部署在子目錄中（例如 https://example.com/app），請在 vite.config.js 中設定基本選項：

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

登入後複製

4.使用react-router-dom的BrowserRouter

如果您使用react-router-dom，請確保您使用BrowserRouter（而不是HashRouter）進行用戶端路由。 BrowserRouter使用HTML5歷史記錄API，Vite支援良好。

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

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

export default App;

登入後複製