Skip to content

holy-two/vite-plugin-alias

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d1ed10f · Feb 3, 2024

History

12 Commits
Jan 27, 2024
Jan 29, 2024
Feb 3, 2024
Jan 27, 2024
Jan 30, 2024
Jan 20, 2024
Feb 3, 2024
Feb 3, 2024
Feb 3, 2024
Feb 3, 2024
Jan 27, 2024
Jan 29, 2024

Repository files navigation

@holy-two/vite-plugin-alias

@holy-two/vite-plugin-alias

Illustration

This is a vite plugin that automatically retrieves and sets path aliases from tsconfig.json.

Usage

npm i @holy-two/vite-plugin-alias -D

In vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+ import vitePluginTemplate from '@holy-two/vite-plugin-alias'

export default defineConfig({
  plugins: [vue(),
+  vitePluginTemplate(),
  ],
})

You just need to configure it like this in tsconfig.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+       "~/*": [
+         "src/*"
+       ]
+     }
  },
  "include": [
    "src/**/*.vue",
    "src/**/*.ts",
    "vite.config.ts"
  ],
}

@holy-two/vite-plugin-alias will automatically parse the paths set within the paths to define aliases. So you can use ~/components/** (same as ./src/components/**) to access files.