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>
Unlike webpack, Vite doesn't have @ aliased to src by default. There is discussion of this at the following issue: https://github.com/vitejs/vite/issues/279
Ultimately you need to create an alias:
// vite.config.js
module.exports = {
alias: {
'/@': path.resolve(__dirname, './src')
}
}
// Your config
export default {
alias: {
'/@': path.resolve(__dirname, './src')
},
plugins: [ ... ]
}
Then you need to use /@ in your files, e.g.:
import foo from '/@foo'