koehr.ing/til/2022-02-22.md

42 lines
986 B
Markdown
Raw Normal View History

2024-05-12 20:15:27 +02:00
# Adding aliases in vite with typescript needs the same alias in tsconfig
For example:
The following vite.config.ts:
```ts
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 this in tsconfig.json:
```json
{
"compilerOptions": {
"paths": {
"~/*": [ "./src/*" ],
"~component/*": [ "./src/components/*" ],
"~composable/*": [ "./src/composables/*" ],
"~lib/*": [ "./src/lib/*" ]
}
}
}
```
The asterixes in the syntax are important (`alias/*` => `./path/*`).