Vite: resolve.alias - how to resolve paths?

Question

What can resolve.alias do? It doesn't resolve the path below:

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

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

In my HTML:

<img src="@/assets/images/sample-1.jpg">

Error in the browser Console:

GET http://localhost:3000/@/assets/images/sample-1.jpg 
Failed to load resource: the server responded with a status of 404 (Not Found)
client:180 [vite] connecting...
client:202 [vite] connected.

Any ideas how to do it correctly?

Answer 1

npm install @rollup/plugin-alias --save-dev

or

yarn add -D @rollup/plugin-alias

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import alias from '@rollup/plugin-alias'
import { resolve } from 'path'

const projectRootDir = resolve(__dirname);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    alias({
      entries: [
        {
          find: '@',
          replacement: resolve(projectRootDir, 'src')
        }
      ]
    })
  ],
  server: {
    host: '0.0.0.0',
    port: 10086, 
    open: false,
    cors: true, 
  },
  build: {
    outDir: 'dist',
  }
})

or

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import alias from '@rollup/plugin-alias'
import { resolve } from 'path'

const projectRootDir = resolve(__dirname);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    alias(),
    vue()
  ],
  resolve: {
    alias: {
      "@": resolve(projectRootDir, "src"),
    },
  },
  server: {
    host: '0.0.0.0',
    port: 10086,
    open: false, 
    cors: true, 
  },
  build: {
    outDir: 'dist',
  }
})