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?
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'
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'),
},
}
})
Here's what worked for me ...
import vue from '@vitejs/plugin-vue'
const path = require('path')
export default {
alias: {
'/@': path.resolve(__dirname, './src')
},
plugins: [vue()]
}
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 downloads with @/
tsconfig.json
{
"compilerOptions": {
...
"paths": {
"@/*": ["./src/*", "./dist/*"]
}
}
}
Vote up people below too except answer of question creator please. He copy paste answer form person who helped him in same day he asked question.
In my Vite 2.7.x
import vue from '@vitejs/plugin-vue'
import path from 'path'
...
...
resolve: {
alias: [
{ find: '@', replacement: path.resolve(__dirname, './src') },
{ find: '...', replacement: path.resolve(__dirname, '...') },
{ find: '...', replacement: path.resolve(__dirname, '...') },
{ find: '...', replacement: path.resolve(__dirname, '...') },
]
}
I tried most of the above solutions and unfortunately did not work. The following did.
In my jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
and in my vite.config.js
import { fileURLToPath } from "url";
import path from "path";
import { defineConfig } from "vite";
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "src"),
},
},
});