vite.config.js
밑의 내용은 ./src를 @로 대체한다는 뜻. @대신 원하는 것을 넣으시면 됩니다.
import { defineConfig } from 'vite';
import { resolve } from 'node:path';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': resolve(__dirname, './src'),
},
},
});
를 해줘도 절대경로로 import 자동적용이 안되었는데
위 설정만 한다면 파일을 import할 수 있지만, VSCode는 이를 인지하지 못하기 때문에 경로를 자동으로 완성해주지 않습니다.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
}
}
}
만약 Typescript 프로젝트가 아니라면 jsconfig.json
에 정의해주세요.
위 코드를 작성해주시면 VSCode도 절대 경로를 인식할 수 있습니다.
import NavBar from "@/components/Common/NavBar";
이와 같이 자동으로 적용됩니다.
출처
를 통해서 해결했다.