[Vue.js] TypeScript에서 '__dirname'과 'path' 모듈이 동작하지 않을 때

Intro

vite를 사용하여 vue 프로젝트 생성 했다. 일반적으로 함수 또는 import 경로를 “ctrl + 클릭” 시 해당 함수 또는 컴포넌트가 있는 곳으로 이동해야 하는데 작동하지 않았다.

ctrl + 클릭시 이동하지 않는다...

ctrl + 클릭시 이동하지 않는다...2

✅ 해결 방법

• Vue 프로젝트에서는 일반적으로 vite.config.ts 또는 vue.config.js에서 @를 src 폴더의 별칭으로 설정하면 된다고 한다.
• vite 사용시 vite.config.ts , vue CLI 사용시 vue.config.js에서 resolve.alias 아래와 같이 설정 해준다.

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 별칭 설정
    },
  },
})

 

__dirname이란?
__dirname은 Node.js에서 현재 실행 중인 파일이 위치한 디렉터리(폴더)의 절대 경로를 나타내는 전역 변수(global variable)이다. 즉, 현재 실행 중인 파일이 있는 폴더의 경로를 얻을 때 사용된다.

 

혹시 path 경로가 잡히지 않는다면 @types/node을 설치 해준다.

npm install @types/node