vue3 vite alias not working as expected with typescript

user_3943632 0
Viewed 2337

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()],
        }),
    ]
})
vite vuejs3 typescript
1 Answers

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"]
}
user_39436320
Related