🔗

絶対パスの使い方

jsを使う場合

jsconfig.jsonフォルダを作成し、以下のように入力します。


// jsconfig.json

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

tsを使う場合

tsconfig.jsonフォルダを作成し、同じように入力します。


// tsconfig.json

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


import {client} from '../../../../lib/sanity/client'
import ContactsDetail from '../../../../components/contacts/ContactsDetail'

これで、上記のような見にくかったインポートのパスを以下のように書き換えることができます。


import {client} from '@/lib/sanity/client'
import ContactsDetail from '@/components/contacts/ContactsDetail'

viteを使う場合


// vite.config.js

export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
});

参考にした資料

Typescript 절대 경로 설정

프로젝트 디렉토리 구조는 어느정도 구조가 잡혔고,본격적인 개발 시작전에 절대경로 설정을 해보자.절대경로(alias) 설정을 해두면 import/export 시에 경로를 깔끔하게 만들수 있다.우리 프로젝트는 Typescript 기때문에 tsconfig.json 에 추가하

https://velog.io/@ahndong2/Typescript-절대-경로-설정

vite 리액트 상대경로 @로 절대 Path 대체하기 - Tech Trend

vite 빌드로 구성한 리액트 앱의 경우 import 경로를 @로 절대 Path 대체하여 사용하는 방법에 대해서 정리하였습니다.이 방법을 사용하면 ../../../…….. 등의 상대 경로의 불편함을 해소할 수 있습니다.

https://techtrendtalk.com/vite-리액트-상대경로-로-절대-path-대체하기/