- Node版本:v20.16.0
- Vite版本:5.4.1
-
安装
@types/node
依赖包jspnpm i @types/node -D pnpm ls @types/node
-
配置
vite.config.js
文件:jsresolve: { alias: { "@": join(__dirname, "./src/"), }, },
-
使用配置好的别名
@
:
由上图我们发现,我们虽然配置了别名,但是vscode并没有给出提示,那就意味着别名没有生效。
-
解决方案:
因为使用
Vite
创建的React
项目,并没有生成jsconfig.json
文件。因此我们需要手动创建jsconfig.json
文件,添加如下配置:js{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"], } }, "include": ["src"], "exclude": ["node_modules", "dist"] }
此时,再导入组件使用@时,就会有提示了,如图:
-
知识拓展:
-
配置别名,实际有两种写法:
alias配置官方文档:https://cn.vitejs.dev/config/shared-options#resolve-alias
-
对象形式:Record<string, string>
jsresolve: { alias: { '@': join(__dirname, '/src/') } },
-
数组形式:Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>
jsresolve: { alias: [{ find: '@', replacement: join(__dirname, '/src/') }] },
-
-