我们为了省略冗长的路径，经常喜欢配置路径别名。但是在typescript下会遇到一些坑，比如导入路径不能以“.ts”扩展名结束，路径不识别等。下面我记录了我的处理方法。
vite.config.js：
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src') // 配置别名
}
}
})配置完之后，就可以在ide中使用别名了。但是这个时候我发现，路径下面报错了，hover上去后提示的错误是：导入路径不能以“.ts”扩展名结束。
既然不允许用扩展名，那么我省略扩展名好了。
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
}
})
这样，扩展名就不需要写了。
但是，项目无法运行了，报错显示：找不到这个文件。
那就是编译出问题了，于是我调整了 tsconfig.json，添加如下配置：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"] // 相对位置需要配置baseUrl才能识别，否则会报错
}
}
}
注: vite 和 vite2版本配置不一致
如果项目是vite版的 需要将最外层的resolve给取消掉 (重启项目即可配置成功)
export default {
alias: {
'/@/': resolve(__dirname, 'src'),
},
}到此这篇关于typescript vite项目配置别名的方法实现的文章就介绍到这了,更多相关typescript vite配置别名内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！