跳到主要内容位置

配置 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 路径别名的方式,你学会了吗?

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买