Vue(8) import 시 @/ 로 시작하는 절대경로 설정하기

vue 에서 파일경로를 작성할 때, 상대경로보다는 절대경로가 훨씬 편하다. @를 활용한 절대경로 작성법을 알아보자.

import Demo from '../../demo/basic/Demo' // 상대경로
import Demo from '@/demo/basic/Demo'	 // 절대경로

 

 

1. 프로젝트 최상단 루트에 jsconfig.json 이라는 파일을 만들어준다.

 

2. 그 안에 아래 내용을 붙여준다. 그럼 최상단 루트 내에서 @/붙여 절대경로를 자유로이 사용할 수 있다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./src/*"
      ],
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}