什么年代了，你还在手动配置vite路径别名？

什么是路径别名

vite项目中，当我们引入某一个文件时，路径是相对于当前页面的，有时写起来会非常麻烦

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

聪明的人可能会用路径别名配置！

使用路径别名配置，可以非常优雅的引入某个资源

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

当然，我们先要在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'),
    }
  }
});

vite中，使用resolve.alias进行路径别名配置。

resolve.alias

官网文档：https://cn.vitejs.dev/config/shared-options.html#resolve-alias

这个配置实际会作为rollup插件@rollup/plugin-alias的entries 的选项。必须使用绝对路径进行配置！

想要使用路径别名，我们需要先在vite.config.js中配置，如果我们的alias中配置了如下代码

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

那么，我们代码中的@符号就代表的是/src,代码中的引入

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

实际就是

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

现在，我们在任意一个文件里，输入@代表src文件夹

但，这依旧有一点点不方便。

比如上述的例子，我们输完@符号，还要继续输入/common/assets/icon才能找到文件。

目前来看，想要直接输入@/logo.svg找到文件，只能在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'),
    }
  }
});

这样太麻烦了，我们有更好的解决办法！我们可以使用vite-aliases插件帮助我们简化这个过程！

vite-aliases的使用与原理

主要作用

vite-aliases可以帮助我们自动生成别名：检测你当前目录下包括src在内的所有文件夹, 并帮助我们去生成别名

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

使用

安装

npm i vite-aliases -D

添加到vite.config.js

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

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

此时，无需配置resolve.alias在项目中即可使用@路径别名。

原理

Vite-aliases其实是抢在vite执行配置文件之前去改写配置文件

通过vite.config.js 返回出去的配置对象以及我们在插件的config生命周期中返回的对象都不是最终的一个配置对象，vite会把这几个配置对象进行一个merge合并 {...defaultConfig, . ..specifyConfig} 。

Vite-aliases实际就是帮我导出了一个默认的resolve.alias配置，最终和vite.config.js内的配置进行合并。