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

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'),
    },
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

如果导入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/*"]
    },
  },
	
    //你的其他配置
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.修改你的import就ok了

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

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

改为

import { login } from "@/net";
1

大功告成