什么是路径别名
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内的配置进行合并。
