vue3 vite alias not working as expected with typescript

Question

I tried all the answers in below thread and got no luck:

`Vue3 - Vite` project alias src to @ not working

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        extensions: ['.ts', '.js', '.vue'],
        alias: [{
            find: '@',
            replacement: resolve(__dirname, 'src')
        }],
    },
    plugins: [
        vue(),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ]
})

Answer 1

Struggled with this issue for several hours, and just solved it several minutes after posting the issue here...

Ts config is also needed:

1. If path is not working, please add baseUrl config as well.
2. Restart the IDE once the configuration has been modified. (IntelliJ has been tested not working if it hasn't been restarted)

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "./src/*"
      ],
    },
    "lib": [
      "esnext",
      "dom"
    ]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}