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'),
},
}
})

Update 2022

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/*"]
}
}
}

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"),
},
},
});

Export path resolve function

Problrem

@/ alias doesn't work in :src dynamic attribure, so that you can't resolve asset file path dynamically.

Solution

1. In the common ts code, define path resolve function(i.e. img()) using import.meta.url.
2. Use img() in the vue script.

Files

/src
/assets/img/
logo.png
Util.ts
App.vue

Util.ts

export const srcRoot = import.meta.url;
export function img(name:string){
return new URL(`./assets/img/${name}.png`, srcRoot)
}

App.vue

<script>
import {img} from "./Util";
</script>


<template>
<img  :src="img('logo')" />
</template>

This seems to work for me and is shorter:

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path'


export default defineConfig({
resolve: {
alias: {
'@': path.resolve('./resources'),
}
},
plugins: [
laravel({
input: 'resources/js/app.js',
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});

In my blog post i describe how to configure this with Vite, TypeScript and Jest: https://divotion.com/blog/how-to-configure-import-aliases-in-vite-typescript-and-jest. For Vite change the vite.config.ts file to:

// vite.config.ts
import { defineConfig } from "vite";
import path from "path";


export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});

As of Oct 2022

I encountered similar problems to yours, although I'm working on my React Project using Vite this still works on the Vue project too.

This is my vite.config.ts:

import { defineConfig } from 'vite';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'/@src-pages': path.resolve(__dirname, './src/pages'),
'/@src-assets': path.resolve(__dirname, './src/assets')
}
},
plugins: [vue()]
});

Don't forget to add "/" before your alias name.

I found this solution from Vite Github Issue: https://github.com/vitejs/vite/issues/279#issuecomment-635646269