Module aliases in Vite.js

Coming from Webpack we know the use of aliases to change how modules are resolved. Think for example about using the @ as an alias of the src directory in your project, which is often found in Vue projects.

Vite.js comes with support for module aliases as well. Allowing us to resolve a module using an alias.

To create such an alias in Vite.js we need to add some configuration to our project's vite.config.[js|ts] file.

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

const path = require('path');

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src'),
    },
  },
})

By adding the above alias we can do imports starting from the src directory by using @.