在 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";
​

​​