페이지를 다시 로드할 때 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을 제공하여 서버가 클라이언트측 라우팅을 처리하도록 설정되어 있는지 확인하세요.

예:

엔진엑스:

  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>

로그인 후 복사

익스프레스(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. 루트가 아닌 배포를 위해 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을 사용하는 경우 클라이언트측 라우팅에 BrowserRouter(HashRouter 아님)를 사용하고 있는지 확인하세요. BrowserRouter는 Vite가 잘 지원하는 HTML5 기록 API를 사용합니다.

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

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

export default App;

로그인 후 복사