[vite][최신방법] src경로를 @로 쉽게 쓰는 법

한번 혼자 처음부터 다 해보려는데 뭔소리고~~~~~~~~~~~~~~~~~~~~ 맨날 남이 기본 셋팅 해준걸로 시작하다보니 config파일이고 뭐고 다 어렵다 어려워

 

1. vite.config.ts 수정

import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

 

import path를 추가하고, resolve부분을 복붙해주면 된다. 참고로 import 부분에 에러가 난다면 마우스 대고 빠른 수정 눌러서 type node를 추가(설치)하거나 npm install --save @types/node 이걸 해주면 될듯.

 

2. tsconfig.json 수정

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

아직 끝나지 않았다. tsconfig파일로 가서 compilerOptions에 paths 추가해주고 복붙하면 된다.

 

 

https://stackoverflow.com/questions/68217795/vite-resolve-alias-how-to-resolve-paths

Vite: resolve.alias - how to resolve paths?

 

 

+ 241108 추가

이번에 새로 프로젝트를 만들었는데 아무리 똑같이 해도 빨간줄 에러가 뜨더라. 인성 바닥까지 떨어졌다가 겨우 스택오버플로우에서 찾음 땐큐땐큐 유 세이브드 미

 

1. tsconfig.app.json에도 같은 내용 써주기

tsconfig.app.json, tsconfig.json 두 파일에 같은 path를 써줘야한다.

// tsconfig.app.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@container/*": ["./src/components/container/*"],
      "@modal/*": ["./src/components/modal/*"],
      "@type/*": ["./src/types/*"],
      "@api/*": ["./src/api/*"],
    },
  },
  "include": ["src"]
}

// tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@container/*": ["./src/components/container/*"],
      "@modal/*": ["./src/components/modal/*"],
      "@type/*": ["./src/types/*"],
      "@api/*": ["./src/api/*"],
    },
  },
}

 

 

참고로 vite.config.ts에서는 아래 플러그인을 깔면 아래와 같이 깔끔하게 알아서 path를 찾게 설정해줄 수 있다.

npm i vite-tsconfig-paths

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
})