In what age, are you still manually configuring vite path aliases?

What is a path alias

In the vite project, when we import a certain file, the path is relative to the current page, sometimes it is very troublesome to write

import myIcon from "../../../common/assets/icon/logo.svg"

Smart people might configure with path aliases!

Using path alias configuration, you can introduce a resource very elegantly

// 引入
import myIcon from "@/logo.svg"

Of course, we must first configure in vite.config.js

// vite.config.js
import path from "path"
import {
    
     defineConfig } from "vite";
export default defineConfig({
    
    
  resolve: {
    
    
    alias: {
    
    
      '@': path.resolve(__dirname, './src/common/assets/icon'),
    }
  }
});

In vite, use resolve.alias for path alias configuration.

resolve.alias

Official website document: https://cn.vitejs.dev/config/shared-options.html#resolve-alias

This configuration will actually be used as an option for the entries of rollupthe plugin . Absolute paths must be used for configuration!@rollup/plugin-alias

To use a path alias, we need to configure it in vite.config.js first, if we aliasconfigure the following code in

// vite.config.js
import path from "path"
import {
    
     defineConfig } from "vite";
export default defineConfig({
    
    
  resolve: {
    
    
    alias: {
    
    
      '@': path.resolve(__dirname, './src'),
    }
  }
});

Then, the symbols in our code @represent that /srcthe introduction in the code

import myIcon from "@/common/assets/icon/logo.svg"

actually is

import myIcon from "/src/common/assets/icon/logo.svg"

Now, in any file, we enter @the src folder

However, this is still a little inconvenient.

For example, in the above example, after we have entered @the symbols, we have to continue to enter /common/assets/iconto find the file.

At present, if you want to directly enter @/logo.svgand find the file, you can only add configuration in vite.config.js

// vite.config.js
import path from "path"
import {
    
     defineConfig } from "vite";
export default defineConfig({
    
    
  resolve: {
    
    
    alias: {
    
    
      '@': path.resolve(__dirname, './src/common/assets/icon'),
      '@': path.resolve(__dirname, './src'),
    }
  }
});

This is too much trouble, we have a better solution! We can use the vite-aliases plugin to help us simplify this process!

The use and principle of vite-aliases

main effect

vite-aliases can help us automatically generate aliases: detect all folders including src in your current directory, and help us generate aliases

{
    
    
    "@": "/**/src",
    "@aseets": "/**/src/assets",
    "@components": "/**/src/components",
}

use

Install

npm i vite-aliases -D

Add to vite.config.js

// vite.config.js
import {
    
     ViteAliases } from 'vite-aliases'

export default {
    
    
    plugins: [
        ViteAliases()
    ]
};

At this point, @path aliases can be used in the project without configuring resolve.alias.

principle

Vite-aliasesIn fact, it is to viterewrite the configuration file before executing the configuration file

The configuration objects returned through vite.config.jsand the objects we return in the config life cycle of the plug-in are not the final configuration object, vite will merge these configuration objects {...defaultConfig, . ..specifyConfig}.

Vite-aliases actually helped me export a default resolve.aliasconfiguration, which was finally vite.config.jsmerged with the internal configuration.