前言
项目开发的过程中,.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/*"
]
}
},
配置好之后写 @
后就有路劲资源提示了