I have installed the project with vue3 - vite
importing a component like
import Component from '../../../../components/Component.vue'
i just want to alias the src folder and do
import Component from '@/components/Component.vue'
this is my vite.config.js
import vue from '@vitejs/plugin-vue'
/**
* https://vitejs.dev/config/
* @type {import('vite').UserConfig}
*/
export default {
plugins: [
vue({
template: {
compilerOptions: {
// ...
}
}
})
]
}
am i missing something? what else should i do?
In the vite.config.js
file write the below code blocks
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
}
})
This solution comes by default from when creating a new project with npm init vue@latest
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)),
},
},
});
In components use @/
:
<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
</script>
This is what worked for me:
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@/': `${path.resolve(__dirname, 'src')}/`
}
}
})
Then in components:
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
Vue 3 Vite TypeScript
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
}
})
To remove warnings and add hint to download with @/
tsconfig.json
{
"compilerOptions": {
...
"paths": {
"@/*": ["./src/*", "./dist/*"]
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With