昨日我尝试使用vue3 setup + ts + vite进行vue3项目的实现，遇到此问题：

Cannot find module ... or its corresponding type declarations.（ts2307）

文件报错类型以及ts官方错误说明：

这里以别名"@"为例子：

// .vue文件
<script setup lang="ts">
import LoginApi from '@/apis/loginApi'; // (ts2307)
import { getDate } from '@/utils/date'; // (ts2307)
</script>

// .ts文件
import LoginApi from '@/apis/loginApi'; // (ts2307)

2307

错误

Cannot find module '{0}'.

找不到模块“{0}”。

问题解决方案：

解决方向：开发工具配置 or 项目配置

一、开发工具有关：这里只说使用到的vscode

1、优先查看自己vscode的工作的ts位置及版本

首先，mac: command + shift + P （windows应该也是类似案件cmmand换成Alt或者Ctrl）打开搜索 type 就会显示如下：

然后，让Volar去选择对应的工作位置及版本：

最后，请选择使用工作台版本（这是在寻找问题时候看到尤大大给出的答案）。

切记！！！选择后完全关闭vscode重启！！！

2、可能有人看到Volar：Select TypeScript Version...

这里Volar就是一个vscode插件，对应是为了Vue3的使用。（插件库直接搜索Volar就可以下载）

要编写Vue3所以请下载Volar并关闭Vetur，并注释或删除到你所有的Vetur用户设置：

command + shift + P （windows应该也是类似案件cmmand换成Alt或者Ctrl）打开搜索 setting 就会显示如下：

打开setting.json文件全局搜索“vetur”并删除或注释掉相关设置保存。

切记！！！保存后完全关闭vscode重启！！！

二、项目配置有关：这里构建工具使用vite，但webpack,gulp应该是类似的：

2个配置文件需要相互设置好：

tsconfig.json

{"compilerOptions": {// ..."baseUrl": "./",  // 这里需要配置"paths": {"@/*": ["./src/*"]  // 这里需要配置}// 如果baseUrl设置为'src',那paths就应该配置为{"@/*": "./*"},如下：// "baseUrl": "src",// "paths": {//  "@/*": ["./*"]// }// 相关baseUrl，paths说明请查看官方文档},// include也需要配置以下："include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"exclude": ["node_modules"]
}

vite.config.ts

{resolve: {alias: {  // 这里就是需要配置resolve里的别名"@": path.join(__dirname, "./src"), // path记得引入// 'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名},},
}

保存好后，切记！！！保存后完全关闭vscode重启！！！

PS：开发工具和项目配置都需要确认好，构建工具和js框架应该都是类似的问题，设置好就没问题！

希望能帮大家解决问题，如果还有问题可以提出来，大家互相交流交流，一起解决，一起学习！

vue3 setup + ts + vite 项目问题解决：Cannot find module ... or its corresponding type declarations.（ts2307）相关推荐

前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)
一.文章引导 #mermaid-svg-1aHB08JglRY7yGzA {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
【vue3】vue3+ts+vite项目设置路径别名
解决流程 1.安装依赖 npm install @types/node -D 2.tsconfig.json配置 {"compilerOptions": {....."b ...
electron+vue3全家桶+vite项目搭建【九】集成vite-plugin-mock-server 模拟后端请求
文章目录引入 1.引入依赖 2.集成插件 3.测试接口请求引入后端接口出的太慢?问题不大,咱们可以借助vite-plugin-mock-server插件自己写接口,返回商量好的格式,后续联调直接 ...
electron+vue3全家桶+vite项目搭建【八】集成mockjs模拟数据
引入造数据是很麻烦的事情,我们可以把造数据的流程交给mockjs去做视频讲解 mock.js官网 demo项目地址 1.引入依赖 # 安装mockjs的依赖 npm install mockjs ...
vue3 setup ts 基于 element-plus 组件的二次封装
这里以 ElDialog 组件编写自己的 Dialog 组件为示例写组件前先将 @element-plus/utils 定义props类型的方法放到自己的 /src/utils/props.ts 文 ...
electron+vue3全家桶+vite项目搭建【一】使用开源项目快速搭建基础工程
文章目录指引 1.创建工程 2.安装依赖 3.运行工程 4.打包工程指引项目地址视频讲解 1.创建工程直接用开源的electron构建脚手架:https://github.com/elect ...
Vue3.0+TypeScript+Vite
Vue3.0 + TypeScript + Vite Vue3.0+TypeScript+Vite 项目创建(推荐使用yarn包管理器) 项目结构 main.ts App.vue: Compositi ...
解决Vue3的ts报错：类型“{}”上不存在属性“xxx”，两种方法彻底根治
刚创建的一个Vue3和Ts的项目,结果使用Vscode打开后,修改了index.vue文件就报错了: 网上找了各种原因,有让添加jsconfig.json文件的,有让新建一个项目的,有的直接放弃ts的 ...

vue3 setup + ts + vite 项目问题解决：Cannot find module ... or its corresponding type declarations.（ts2307）