Adding aliases in vite with typescript needs the same alias in tsconfig
For example:
import { fileURLToPath, URL } from "url"
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
"!component": fileURLToPath(new URL("./src/components", import.meta.url)),
"!composable": fileURLToPath(new URL("./src/composables", import.meta.url)),
"!lib": fileURLToPath(new URL("./src/lib", import.meta.url)),
}
}
})
will need the following in tsconfig.json:
{
"compilerOptions": {
"paths": {
"@/*": [ "./src/*" ],
"!component/*": [ "./src/components/*" ],
"!composable/*": [ "./src/composables/*" ],
"!lib/*": [ "./src/lib/*" ]
}
}
}
The asterixes in the syntax is important (alias/* => ./path/*
).