-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
경로 alias 설정
20.04.28 11:40 작성 조회수 589
1
안녕하세요! 강의 내용 중 jsconfig.json으로 설정한 경로 관련하여 문의 사항이 있습니다.
1. .vue 파일 내 자동 완성 안됨
=> 강의해주신 프로젝트 말고, 새로 프로젝트를 생성하여 같은 jsconfig.json 파일을 적용하였습니다.
=> js 파일에서는 import 시, @/로 자동 완성이 되는데 .vue 파일에서는 @/로 자동 완성이 안되더라구요! 혹시 어떤 부분을 확인하는게 좋을까요?
2. webpack alias 설정
=> jsconfig.json은 vscode에서 자동 완성을 적용하기 위해서만 사용되는 설정인가요?
=> build 시 반영을 위해 jsconfig.json 설정 후, webpack alias 설정도 같이 해줘야하는건지 궁금합니다.
답변을 작성해보세요.
0
장기효(캡틴판교)
지식공유자2020.04.28
안녕하세요 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
2021.05.26
저도 마찬가지로 js파일에서는 자동 완성이 되지만 vue에서는 안되는 문제가 발생합니다.
jsconfig.json 파일은 다음과 같습니다. 깃허브에 올라와 있는 것과 다르지 않은데 어떻게 하면 좋을까요? 따로 웹팩으로 뭘 설정했던 것 같지는 않습니다.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./src/*"
],
}
},
"exclude": [
"node_modules",
"dist"
]
}
답변 1