ページをリロードすると Vite React アプリの MIME エラーが発生する-jsチュートリアル-php.cn

ページをリロードすると Vite React アプリの MIME エラーが発生する

Susan Sarandon

リリース： 2024-12-18 12:41:10

オリジナル

266 人が閲覧しました

Vite React app MIME error when reloading the page

サーバーがルーティングを処理するように正しく構成されていないために、Vite React アプリでページをリロードするときに MIME タイプエラーが発生することがよくあります。この問題は、クライアント側ルーティングが使用される React アプリなどのシングルページアプリケーション (SPA) でよく発生します。ルート以外のルートでページをリロードすると、サーバーはそれを処理する方法がわからず、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;
      }
  }

ログイン後にコピー

Apache:

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

Express で Node.js を使用してアプリを提供している場合は、次のミドルウェアを追加して、不明なルートの 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. 非 root デプロイメント用に Vite にベースオプションを追加する

アプリがサブディレクトリ (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 を使用している場合は、クライアント側のルーティングに (HashRouter ではなく) BrowserRouter を使用していることを確認してください。 BrowserRouter は、Vite がよくサポートしている HTML5 履歴 API を使用します。

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

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

export default App;

ログイン後にコピー