react + ts 配置项目路劲别名（import的时候使用@符号报错）

前言

项目开发的过程中，.tsx 页面中 import 引入项目的时候 .ts 文件报错: 找不到模块 “@/xxx/xxx” 或其相对应的类型声明。
其原因主要是因为目前 ts 对 @ 指向 src 的目录的提示是不支持的，vite默认也不支持。
所以需要手动配置 @ 符号的指向

路劲别名的配置

在 vite.config.ts 中添加配置:

import path from "path"

export default defineConfig({
  ...
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src')
    }
  }
})

这时候引入的 path 模块会报红，但我们已经有 node 了，path 模块是存在的，只是缺少 ts 的一些声明配置，因此安装关于 node 这个库的 ts 声明配置即可

npm i -D @types/node

安装成功就没有报红了，如果 import 后面的 path 报红，就把引入换成 import * as path from 'path'; 即可

配置路劲别名的提示

虽然现在路劲别名已经有了，但是在文件中输入 @ 是没有提示路劲的
需要我们在 tsconfig.json 中：添加两项配置

"compilerOptions": {
	...
	"baseUrl": "./",
	"paths": {
	  "@/*": [
	    "src/*"
	  ]
	}
},

配置好之后写 @ 后就有路劲资源提示了