vue3+ts+vite中“@“路径失效的解决办法

 更新时间:2024年11月12日 08:33:42   作者:代码&钢琴师  
这篇文章主要介绍了vue3+ts+vite中“@“路径失效的解决办法,在使用vite脚手架生成项目时,解决引入路径失败的错误,可以按照本文介绍的步骤操作,需要的朋友可以参考下

发现问题

在使用vite脚手架生成项目时,会出现一些引入路径失败的错误

出现报错: ts类型错误提示找不到模块“path”或其相应的类型声明

解决方法

1.安装 npm i @types/node -D

2.配置vite.config.ts

import path from 'path'
.................
export default defineConfig({
  ..................
  resolve:{
    alias:{
      "@":path.resolve(__dirname,'./src')
    }
  }
})

3.配置tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

4.如果tsconfig,json文件有两个path,把app.json的路径删了即可

最后:记得重启vscode

总结

到此这篇关于vue3+ts+vite中“@“路径失效解决办法的文章就介绍到这了,更多相关vue3+ts+vite中“@“路径失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue watch响应数据实现方法解析

    Vue watch响应数据实现方法解析

    这篇文章主要介绍了Vue watch响应数据实现方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • Vue的自定义事件之组件通信工具详解

    Vue的自定义事件之组件通信工具详解

    这篇文章主要介绍了Vue的自定义事件之组件通信工具详解,Vue的自定义事件(Custom Events)是一种强大的工具,用于实现组件之间的通信和数据传递,本文将深入探讨什么是Vue的自定义事件,以及如何自定义和使用它们,需要的朋友可以参考下
    2023-10-10
  • Vue使用Proxy代理后仍无法生效的解决

    Vue使用Proxy代理后仍无法生效的解决

    这篇文章主要介绍了Vue使用Proxy代理后仍无法生效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 导致VUE页面不刷新的问题分析及解决方法

    导致VUE页面不刷新的问题分析及解决方法

    由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的,这篇文章主要介绍了导致VUE页面不刷新的问题分析及解决方法,需要的朋友可以参考下
    2024-04-04
  • elementUI样式修改未生效问题详解(挂载到了body标签上)

    elementUI样式修改未生效问题详解(挂载到了body标签上)

    vue+elementUI项目开发中,经常遇到修改elementUI组件样式无效的问题,这篇文章主要给大家介绍了关于elementUI样式修改未生效问题的相关资料,挂载到了body标签上,需要的朋友可以参考下
    2023-04-04
  • vue.js $refs和$emit 父子组件交互的方法

    vue.js $refs和$emit 父子组件交互的方法

    本篇文章主要介绍了vue.js $refs和$emit 父子组件交互的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 详解Vue组件之间的数据通信实例

    详解Vue组件之间的数据通信实例

    本篇文章主要介绍了详解Vue组件之间的数据通信实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue双向绑定详解

    Vue双向绑定详解

    这篇文章主要介绍了Vue 实现双向绑定的四种方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能够给你带来帮助
    2021-11-11
  • el-table实现给每行添加loading效果案例

    el-table实现给每行添加loading效果案例

    这篇文章主要介绍了el-table实现给每行添加loading效果案例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue 中的 deep、v-deep 和 >>>区别解析

    Vue 中的 deep、v-deep 和 >>>区别解析

    文章主要介绍了在Vue中使用UI库时,如何通过样式穿透(style penetration)来修改子组件的样式,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2026-02-02

最新评论