Vite 기반의 React 빌드시 경로 변경 방법

트러블 슈팅

Vite 로 만든 React 를 마이크로 프론트엔드 아키텍쳐를 이용해서 다른 프로젝트에 정적파일로 넣는 방법을 하고 있습니다.

그런데, build 시에 .html 에서 js, css 를 /assets/ 경로로 참조하는 것에 문제가 발생했습니다.

 

우리가 원하는 경로는  ./assets/ 입니다.

방법은 아래와 같이 vite.config.js 에서 base 를 추가하여 상대 경로로 변경해줍니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  base: "./", // 상대 경로 설정
});