Vite + TypeScript 프로젝트 모듈 경로 aliasing

as-is:

import AppComponent from "../../AppComponent.vue"

to-be:

import AppComponent from "@/components/AppComponent.vue" 

👉 변경 후 불필요한 경로가 노출되지않아 가독성 상승

⚙️ 설정 방법

1. vite.config :

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      { find: "@", replacement: "/src" }
    ],
  },
})

2. tsconfig :

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

    // ...
  }
}