typescript+vite项目配置别名的方法实现
更新时间：2022年07月06日 09:04:55 作者：acgCode
我们为了省略冗长的路径，经常喜欢配置路径别名，本文主要介绍了typescript+vite项目配置别名的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
我们为了省略冗长的路径，经常喜欢配置路径别名。但是在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配置别名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇vueJS简单的点击显示与隐藏的效果【实现代码】。小编觉得挺不错的，现在分享给大家，一起跟随小编过来看看吧2016-05-05
iview-table组件嵌套input select数据无法双向绑定解决
这篇文章主要为大家介绍了iview-table组件嵌套input select数据无法双向绑定解决示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
vue+element获取el-table某行的下标,根据下标操作数组对象方式
这篇文章主要介绍了vue+element获取el-table某行的下标,根据下标操作数组对象方式，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧2020-08-08
vue+ElementUI实现订单页动态添加产品数据效果实例代码
本篇文章主要介绍了vue+ElementUI实现订单页动态添加产品效果实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
本文主要介绍了 vue全局引入scss,我们在写VUE的时候,会使用scss，也会做一些通用样式,方便使用,在写好的通用样式的时候,每次都要单文件导入,刚开始写的时候,感觉还好,后面工程量大了后,就显得麻烦,那么本文就全局导入scss样式,下面来看详细内容,需要的朋友可以参考一下2021-11-11
在 Vue.js 开发中,合理地控制元素的样式对于构建高质量的用户界面至关重要,Vue 提供了灵活的方式来绑定样式,这篇文章将探索 Vue 中设置样式的七种做法,并结合代码,逐步说明每种方法的实现,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了全局引入vant后使用Toast的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了使用vue制作滑动标签，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
Vue3+Ant design 实现Select下拉框一键全选/清空功能
在做后台管理系统项目的时候,产品增加了一个在Select选择器中添加一键全选和清空的功能,他又不让在外部增加按钮,其实如果说在外部增加按钮实现全选或者清空的话,功能比较简单的,下面给大家分享Vue3+Ant design 实现Select下拉框一键全选/清空功能,需要的朋友可以参考下2024-05-05
Vue3组合式函数Composable实战ref和unref使用
这篇文章主要为大家介绍了Vue3组合式函数Composable实战ref和unref使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论