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目錄。

將別名設置完成之后，可在路由匹配規則中進行使用，示例代碼如下。