配置 Vite alias 别名导入，避免冗长的相对路径

在开发大型 Vue 项目的时候，有的组件会嵌套的很深，如果需要引入外层其他目录的组件，需要编写很长一段相对路径。假如有如下组件目录结构：

/Layout/Header/NavBar.vue
/Base/BaseLink.vue

如果在 NavBar 中引入 BaseLink 组件，需要使用下面的路径进行导入：

NavBar.vue
<script>
import BaseLink from '../../Base/BaseLink.vue';
</script>

这里使用了两个 ../ 才访问到 Base 目录，如果这个时候，我们给 ../../ 设置一个别名，例如 @，那么就可以使导入路径更简洁，变成：

@/Base/BaseLink.vue

Vite 支持设置路径别名，来支持这种形式的导入。

配置 Vite alias 别名导入

这里，如果要实现上面示例中的别名效果，需要把 src/components 目录设置为别名 @，这样，路径中的 @ 就会被认为是路径别名 alias，在实际导入时，会替换成 src/components 这个目录。

要给 Vite 添加路径 alias 别名，可以在 `vite.config.js` 中加入如下配置：

```javascript

import path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src/components"),
    },
  },
});

这里：

• 我们在 defineConfig 的配置对象中，添加一个 resolve 配置，它的值是一个对象。
• 在 resolve 配置对象中，添加一个 alias 配置项，它的值也是一个对象。
• 在 alias 配置对象中，我们以键值对的形式配置路径别名。
  • 这里添加了一个 @ 属性，表示路径的 alias 别名。
  • 它的值是实际的路径，这里我们调用 node.js 的 path 模块的 resolve 方法，将 __dirname 和 ./src/components 进行拼接，得到实际的路径。src 前的 ./ 是必须得。另外注意 path 需要导入进来。

这样我们就配置好了 vite 的路径别名，之后就可以使用 @/Base/BaseLink.vue 这样的方式，导入 BaseLink 组件了，无论当前组件的嵌套目录有多深。

你可以根据自己的实际情况，修改实际的目录，例如让 @ 对应 src 目录，这样可以导入除了 components 目录外，其他目录下的组件。

小结

这个就是给 Vite 配置 alias 路径别名的方式，你学会了吗？