配置 Vite 支持用 “@” 路径别名导入文件

需要做如下两步配置。

1、让 vite 能识别 @ 路径别名

vite.config.js 增加:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { resolve } from 'path';

export default defineConfig {
// ...
resolve: {
alias: {
"@": resolve(__dirname, 'src'), // vite 编译的路径别名
},
// extensions: ['.js', '.json', '.ts'], // 使用路径别名时省略后缀名编译时补全,默认值为 ['.js', '.json', '.ts']
}
// ...
}

2、让 IDE 能识别 @ 路径别名

用 @ 路径别名导入文件后,IDE (如 jetbrains 家的)要能识别导入路径,实现代码提示识别,点击导入变量或导入路径能跳转到文件。

在根目录下的 jsconfig.json 加入以下内容:

1
2
3
4
5
6
7
8
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

配置 Vite 支持用 “@” 路径别名导入文件

https://coderpan.com/front-end/vite 配置 “@” 文件路径别名.html

作者

CoderPan

发布于

2024-03-01

更新于

2024-03-01

许可协议

评论