如何在typescript vite项目中配置别名实现长尾词？

本文共计402个文字，预计阅读时间需要2分钟。

为了简化并直接回答你的问题，以下是对原文的简化改写，不超过100字：

为了简化路径配置，常使用别名。但在TypeScript中会遇到问题，如路径不以.ts结尾或路径不识别。以下是我的处理方法：vite.config.js中设置别名。

我们为了省略冗长的路径，经常喜欢配置路径别名。但是在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配置别名内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！