2.4　设置文件系统路径别名

路由模块安装完成后即可在routes数组中定义路由匹配规则，在匹配规则中需要指定组件的路径，一个完整的组件路径引用方式如下。

const routes = [
   {
      path:'/home',
      component:()=>import('../components/HelloWorld.vue')
   }
]

项目中的绝大部分文件都是在src目录下操作的，上述路径地址先使用../找到src目录，然后找到组件文件夹，这个过程有点烦琐，通过设置路径别名的方式可以快速指定src目录，那要如何设置路径别名呢？

打开vite.config.js配置文件，配置代码的方法如下。

代码解析：

由于Vue.js基于Node.js，在Vue中可以直接使用Node.js中的内置模块，需要将路径设置成绝对路径，path.resolve()方法可以将相对路径转成绝对路径。

通过alias属性设置别名，__dirname表示vite.config.js文件所在的位置，当前表示使用@别名代替src目录。

将别名设置完成之后，可在路由匹配规则中进行使用，示例代码如下。