vite-plugin-easy-resolve-alias

Make it easy to config Vite's resolve alias.

Install

npm install -D vite-plugin-easy-resolve-alias

Usage

Basic

Add this plugin in your vite.config.js:

import { defineConfig } from 'vite'
import ResolveAlias from 'vite-plugin-easy-resolve-alias'

export default defineConfig({
  plugins: [
    ResolveAlias({ '~/': 'src/' })
  ]
})

then you can use the alias you configured:

import foo from '~/foo'
const bar = foo()

Use RegExp

Regular expression is allowed while passing in an array like this:

import { defineConfig } from 'vite'
import ResolveAlias from 'vite-plugin-easy-resolve-alias'

export default defineConfig({
  plugins: [
    ResolveAlias([{ find: /^~\//, replacement: 'src/' }])
  ]
})

TypeScript Support

If you are using TypeScript, don't forget to configure your tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

Comparison

Before:

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

export default defineConfig({
  plugins: [
    Vue()
  ],
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`
    }
  }
})

After:

import { defineConfig } from 'vite'
import ResolveAlias from 'vite-plugin-easy-resolve-alias'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    ResolveAlias({ '~/': 'src/' }),
    Vue()
  ]
})

License

MIT