在Vite+TypeScript的项目中使用~和@代替src根路径的方法
# 原由
当前端项目组件比较多的时候,引用组件会面临路径特别长的情况,不易维护且容易出错。定义绝对路径映射是个好办法,下面就介绍 Vite+TypeScript 的项目中中的具体实现。
# 方案
vite.config.ts
resolve: { alias: { "~": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "src"), } }
1
2
3
4
5
tsconfig.json
{ "compilerOptions": { "paths": { "~/*": ["./src/*"] } }
1
2
3
4
5
6
使用
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";
1
2
3
4
5
6
2
3
4
5
6
编辑 (opens new window)
上次更新: 2023/09/19, 13:33:19