Vite, Typescript 상대 Path 잡는 법

tsconfig.json

      "baseUrl": ".",

      "paths": {

        "@/*": ["src/*"]

      }

vite.config.js

import { defineConfig } from 'vite'

import path from "path";

// https://vitejs.dev/config/

export default ({ mode }) => {

  console.log("Run Mode : " + mode);

  console.log(`directory : ${__dirname}`);

  return defineConfig({

    resolve: {

      alias: [

        { find: "@", replacement: path.resolve(__dirname, "src") }

      ]

    },

   

  })

}

2개의 파일에 추가한다. 

vite.config.js 에 잡은 Path는 빌드시 필요한 코드이며,
tsconfig.json 은 vscode로 코딩 시에 오류 메시지를 보여주지 않기 위해서 쓰인다.

tsconfig.json에만 잡아두고 플러그인 통해서 하는 방법도 있다.

import { defineConfig } from 'vite'

import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/

export default ({ mode }) => {

  console.log("Run Mode : " + mode);

  console.log(`directory : ${__dirname}`);

  return defineConfig({

    plugins: [tsconfigPaths()],

   

  })

}