Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"

Nuxt 3 프로젝트를 **정적 SPA(Static Single Page Application)**로 빌드하고, 백엔드(API 서버)와 연동하려는 상황이군요. 아래에 전체 흐름과 반드시 필요한 설정, 그리고 MIME 오류 방지 + 백엔드 API 호출 연동 방법을 체계적으로 정리

---

✅ 1. Nuxt 3 정적 SPA 빌드 방법

npx nuxi generate

• 결과: .output/public/ 또는 dist/ 경로 안에
  • index.html
  • /_nuxt/*.js, .css 등 정적 자산 생성됨

👉 이 구조는 npx serve .output/public로 즉시 실행 테스트 가능

---

✅ 2. 디플로이 구조 개요

역할구성

정적 SPA	Nuxt에서 빌드한 index.html, /_nuxt/*.js
API 서버	별도 백엔드 서버 (예: Spring, NestJS, Express 등)
호스팅 대상	NGINX, AWS S3+CloudFront, SAP BTP, 혹은 자체 Node.js 서버

 

 

---

✅ 3. 서버에서 정적 자산 서빙할 때 주의점

반드시 정적 자산이 존재하는 경로에서 서빙해야 합니다:

• ✅ /index.html → HTML
• ✅ /_nuxt/*.js → JS with Content-Type: application/javascript
• ❌ JS 요청인데 HTML을 반환 → MIME 오류

---

✅ 4. Nuxt에서 API 서버 연동 설정

📄 .env 파일

NUXT_PUBLIC_API_BASE=https://api.example.com

📄 nuxt.config.ts

export default defineNuxtConfig({
  ssr: false, // SPA 모드
  nitro: {
    preset: "static"
  },
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE
    }
  },
  app: {
    baseURL: "/", // 일반적 SPA라면 루트
    buildAssetsDir: "/_nuxt/",
  },
})

---

✅ 5. $fetch나 axios 사용할 때 API base 설정

예: $fetch 사용하는 유틸 함수

export function useApiFetch<T>(url: string, options = {}) {
  const config = useRuntimeConfig();
  return $fetch<T>(url, {
    baseURL: config.public.apiBase,
    ...options,
  });
}

// 사용 예시
await useApiFetch("/api/v1/login", {
  method: "POST",
  body: { username, password },
});

---

✅ 6. 정적 SPA 라우팅 문제 방지 (서버 측 설정)

정적 SPA는 브라우저 라우팅이므로, 서버는 항상 index.html을 반환해야 합니다 (404 말고!)

📄 예: NGINX 설정

location / {
  root /var/www/html;
  index index.html;
  try_files $uri $uri/ /index.html;
}

location /_nuxt/ {
  root /var/www/html;
  access_log off;
}

---

✅ 7. MIME 오류 해결 포인트

요청 경로응답 내용MIME 타입

/index.html	HTML	text/html
/_nuxt/*.js	JavaScript	application/javascript ✅
잘못된 경로 요청 시	HTML	❌ MIME 오류 발생

 

즉, /_nuxt/*.js 요청을 반드시 해당 파일이 실제 존재하는 경로에서 제공해야 하며, HTML을 반환하면 안 됩니다.

---

🧪 체크리스트

• nuxi generate로 index.html, _nuxt/*.js가 생성되었는가?
• 서버가 JS 요청에 대해 HTML이 아닌 JS로 응답하는가?
• API 호출은 useRuntimeConfig().public.apiBase를 사용했는가?
• 상대 경로(/api/...)가 아니라 절대 경로로 API 호출 중인가?
• history fallback (try_files /index.html)이 설정되어 있는가?