Vite로 시작한 Electron 프로젝트 Build 하다가 생긴 오류

🚨 오류 해결: Failed to load URL: file:///Users/eden/Desktop/www/metafia/dist/dist/index.html with error: ERR_FILE_NOT_FOUND 🚨

현재 Electron이 index.html을 로드하지 못하는 문제가 발생하고 있음.

---

✅ 1. 오류 원인

📌 잘못된 경로 설정

• Electron이 file:///Users/eden/Desktop/www/metafia/dist/dist/index.html을 찾고 있음.
• dist/dist/가 포함된 경로가 보이는데, 이는 dist/ 폴더가 중복되어 설정된 것임.

---

✅ 2. main.ts에서 loadURL() 경로 수정

📌 src/electron/main.ts에서 loadURL()을 다음과 같이 수정

🔹 기존 코드 (오류 발생 코드)

mainWindow.loadURL(`file://${path.join(__dirname, "../dist/index.html")}`);

🔹 현재 경로에서 __dirname이 dist/main/이므로 결과적으로 dist/dist/index.html이 되어 버림

🔹 ../dist/index.html → ../renderer/index.html로 변경해야 함

---

🔹 수정된 코드

mainWindow.loadURL(`file://${path.join(__dirname, "../renderer/index.html")}`);

✅ ../dist/index.html → ../renderer/index.html로 수정

또는 Vite 개발 서버를 사용할 때는 이렇게 설정해야 함

mainWindow.loadURL(
  process.env.VITE_DEV_SERVER_URL || `file://${path.join(__dirname, "../renderer/index.html")}`
);

---

✅ 3. Vite 빌드 경로 확인

📌 vite.config.ts에서 outDir이 dist/renderer로 설정되어 있어야 함

🔹 vite.config.ts 수정

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: "dist/renderer",  // ✅ renderer 폴더에 빌드하도록 설정
  }
});

---

✅ 4. 빌드 및 실행

위 설정을 수정한 후 다시 빌드하고 실행

pnpm run build
pnpm run electron

or (개별 실행)

pnpm exec electron ./dist/main/main.js

---

🎯 최종 해결 방법 정리

1. main.ts에서 loadURL() 경로를 ../renderer/index.html로 변경

2. vite.config.ts에서 outDir을 "dist/renderer"로 설정

3. 다시 빌드 후 실행

   pnpm run build && pnpm run electron