경로 alias 설정

Vue.js 끝장내기 - 실무에 필요한 모든 것

작성

714

안녕하세요! 강의 내용 중 jsconfig.json으로 설정한 경로 관련하여 문의 사항이 있습니다.

1. .vue 파일 내 자동 완성 안됨

=> 강의해주신 프로젝트 말고, 새로 프로젝트를 생성하여 같은 jsconfig.json 파일을 적용하였습니다.

=> js 파일에서는 import 시, @/로 자동 완성이 되는데 .vue 파일에서는 @/로 자동 완성이 안되더라구요! 혹시 어떤 부분을 확인하는게 좋을까요?

2. webpack alias 설정

=> jsconfig.json은 vscode에서 자동 완성을 적용하기 위해서만 사용되는 설정인가요?

=> build 시 반영을 위해 jsconfig.json 설정 후, webpack alias 설정도 같이 해줘야하는건지 궁금합니다.

vuex javascript vuejs

답변 1

장기효(캡틴판교)

지식공유자

안녕하세요 bin님, 문의 사항 답변드릴게요 :)

1. 말씀해주신 자동완성 기능은 VSCode 내부적으로 제공하는 기능입니다. 그러다보니 가끔 일반적인 웹 파일(html, css, js)이 아닌 vue 파일은 잘 인식을 못하는 경우가 있는 것 같아요. jsconfig.json 파일의 compilerOptions 속성 다시 한번 확인해보시고 특히 baseUrl 속성이나 기타 속성을 확인해보시면 좋을 것 같습니다 :) 그리고 불려오려는 vue 파일에 SFC 형태로 export가 잘 되어 있는지도 한번 확인해보시면 좋을 것 같아요.

2. 위에서 말씀 드린 것처럼 jsconfig.json 파일은 VSCode 상에서 경로 프리뷰 하기 위한 설정 파일입니다. 웹팩으로 빌드하는 경우에는 @ 별칭이 잘 인식될 수 있게 resolve 속성의 alias 설정이 잘 되어 있어야 합니다 :) 아래 링크 참고해보시면 좋을 것 같아요.

https://webpack.js.org/configuration/resolve/#resolvealias

제 강의를 수강해주셔서 감사합니다 :)

WS IM

저도 마찬가지로 js파일에서는 자동 완성이 되지만 vue에서는 안되는 문제가 발생합니다.

jsconfig.json 파일은 다음과 같습니다. 깃허브에 올라와 있는 것과 다르지 않은데 어떻게 하면 좋을까요? 따로 웹팩으로 뭘 설정했던 것 같지는 않습니다.

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

인프런 커뮤니티 질문&답변

경로 alias 설정