vite+vue+ts项目中报错解决方案

1.vite+vue3+ts项目中提示无法找到模块

一．首先产生这个错误是：无法找到模块XXX，并且提示'XXX' is declared but its value is never read

二． 产生这个问题的原因是我们使用了ts语法，他只能识别.ts文件，并不能识别.vue文件，所以在引入组件的时候报错了。

解决方案在在项目的根目录下创建一个vite-env.d.ts文件，文件名自定义即可，后缀必须是.d.ts

在刚刚创建的文件中输入一下代码

declare module '*.vue' {

    import { ComponentOptions } from 'vue'

    const componentOptions: ComponentOptions

    export default componentOptions

  }

2. TS 报错 Could not find a declaration file for module 'XX' --找不到模块的声明文件xx

解决方案在vite-env.d.ts文件声明:

declare module 'xx'

3. 在ts环境下报Cannot find module 'pinna' or its corresponding type declarations

解决方案安装：npm install -D @types/node

如果问题还没有解决，就打开tsconfig.json文件，确保types中含有"node"。

{

  "compilerOptions": {

    "types": [

      "node"

    ]

  },

}

最重要，重启VSCODE，重新打开项目

4.TS 报错Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add ali

->翻译过来是找不到 vue模块 需要将 moduleResolution设置成node

解决方案在找到 tsconfig.json 文件

  "compilerOptions": {

    "moduleResolution": “node”

  },

}

5.ts报Module ‘“xx.vue“‘ has no default export ==报错信息，提示组件没有到导出

原因：vetur是一个vscode插件，用于为.vue单文件组件提供代码高亮以及语法支持。那既然官方推荐 _volar_，简单的说volar是vetur的升级版本，提供了更好的功能并有更好的TS支持。

解决方法：选择卸载vetur，安装volar插件，最后，记得重启下VS Code。

6. vite + ts 找不到模块@/xxxx 或其相应的类型声明

前提: 在vite.config.ts里面有配置相关的@/路径标签

解决办法：在tsconfig.json 文件配置如下：

"compilerOptions": {

    "baseUrl": "./",

    "paths": {

      "@/*":["./src/*"]

    }

  },

7. 在vite.config.ts里面声明node模块path,报找不到模块“path”或其相应的类型声明

原因：nodejs环境不支持typescript，就给它一个能够找到对应内容的方法或插件

解决方法：pnpm i @types/node -D