React vite 절대경로 설정 방법

필요한 파일

• vite.config.ts
• tsconfig.json

 

vite.config.ts

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@", replacement: "/src" },
      { find: "@page", replacement: "/src/page" },
    ],
  },
});

 

 

      { find: "@", replacement: "/src" },

생성되는 파일은 src 아래에 존재할 것 이므로  "@" 는 " /src " 로 지정

 

 

      { find: "@page", replacement: "/src/page" },

src 아래에 생기는 📁폴더 경로지정

 

 

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@page/*": ["src/page/*"]
    },

//이외 설정

  "include": ["src", "**/*.ts", "**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

 

    "baseUrl": ".",

src/page가 .src/page로 될 수 있도록 설정

 

이외에는  vite 없이 사용하는 방법과 비슷하기에 설명은 생락하겠어.;