TypeScript 使用 @ 来映射文件路径解决找不到模块“@/xxx”或其相应的类型声明的问题

环境：Vue3 + Vite + ts
想便捷引用自定义模块

由于在script中使用import { login } from "../../../net";这用每次都要查文件夹层数，所以想用@直接映射src目录更便捷（可自定义）。如果不添加配置直接引用就会报错找不到模块“@/net”或其相应的类型声明。ts(2307)

下面是配置流程：

1. 配置 vite.config.ts 文件

首先导入 import path from 'path'，其次添加resolve配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'export default defineConfig({//你的别的配置resolve: {alias: {'@': path.resolve(__dirname, 'src'),},},
})

如果导入import path from 'path'报错找不到模块“path”或其相应的类型声明。ts(2307)。需要先安装包

npm install --save-dev @types/node
如果使用的是yarn就用
yarn add @types/node@12 --dev --tilde

2. 配置tsconfig.json文件

给出映射路径src/*,并且baseUrl映射不可缺少，否则会warning

{"compilerOptions": {//你的其他配置/* URLs */"baseUrl": ".","paths": {"@/*": ["src/*"]},},//你的其他配置
}

3.修改你的import就ok了

以我的代码为例（本身net文件夹就在src之下，但是要引用net的文件在很深的地方），把

import { login } from "../../../net";

改为

import { login } from "@/net";

大功告成