在Vite+TypeScript的項目中使用~和@代替src根路徑的方法

原由

當前端項目組件比較多的時候，引用組件會面臨路徑特別長的情況，不易維護且容易出錯。定義絕對路徑映射是個好辦法，下面就介紹 Vite+TypeScript 的項目中中的具體實現。

方案

• ​vite.config.ts​

  resolve: {
      alias: {
          "~": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "src"),
  	}
  }
  

• ​tsconfig.json​

  {
    "compilerOptions": {
      "paths": {
        "~/*": ["./src/*"]
      }
  }
  

使用

import {API_TYPE_CONSTANTS} from "~/utils/constants/apiTypeConstants";
import MetaweblogMain from "~/components/publish/tab/main/MetaweblogMain.vue";

// 原來的
// import {API_TYPE_CONSTANTS} from "../../../../../../utils/constants/apiTypeConstants";
// import MetaweblogMain from "../../MetaweblogMain.vue";