[Vue] 절대 경로 import

• 절대 경로
• 절대 경로 추가
• VSCode 자동완성 설정

절대 경로

절대 경로에 대한 자세한 설명은 이 문서를 참고해주세요!

절대 경로 추가

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

const path = require('path');

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

만약 Vite로 설치하지 않으신 분들은 vue.config.js 파일을 확인해주세요.

VSCode 자동완성 설정

위 설정만 한다면 파일을 import할 수 있지만, VSCode는 이를 인지하지 못하기 때문에 경로를 자동으로 완성해주지 않습니다.

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

만약 Typescript 프로젝트가 아니라면 jsconfig.json에 정의해주세요.

위 코드를 작성해주시면 VSCode도 절대 경로를 인식할 수 있습니다.