添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
单身的水桶  ·  IIS 之 ...·  1 年前    · 
无聊的莴苣  ·  C++ ...·  1 年前    · 
深情的鸡蛋  ·  javascript - KonvaJS: ...·  1 年前    · 

昨日我尝试使用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 setup + ts + vite 项目问题解决:Cannot find module ... or its corresponding type declarations.(ts2307)
vue + TS 项目 中import图片时报错Cannot find module ‘xxx’ or i ts cor re sponding type declaration s 在 vue + ts 项目 中使用import的形式来引入照片时,会提示以下报错: 使用import的形式引入图片, ts 无法识别非代码资源;但是js中这种写法是没有 问题 的。 我们需要新建一个.d. ts 后缀的文件,文件中声明这个 module (格式如下),而且这个文件只能放置在 ts config.json文件中的include属性缩配置的文
【VSCode - Vetur 插件报错】Cannot find module vue ‘ or i ts cor re sponding type declaration s.Vetur(2307) 上述 问题 的产生,一般是由于 Visual Studio Code 中安装了 Vetur 插件,它要求: 1, 项目 在工作区根目录(就是把 项目 文件夹拖进 vscode 后的效果) 2, 项目 排在第一位(不在第一位可以鼠标拖动 项目 移到第一位) 可以看见我是在E:/test目录下使用 vite 创建的runoob-
这个错误通常是因为你的应用程序使用了一个不支持的 JavaScript 方法string.proto type .padstart。这个方法是ES2017规范中新增的方法,可以在字符串前面添加指定数量的字符来达到特定的长度要求。 为了 解决 这个 问题 ,你需要检查你的代码中是否有使用了string.proto type .padstart这个方法。最好使用一个支持ES2017规范的JavaScript引擎来运行你的应用程序,例如Google Chrome、Mozilla Firefox等现代浏览器。 如果你的应用程序必须在不支持ES2017规范的JavaScript引擎上运行,你可以尝试手动实现padstart方法。以下是这个方法的一个简单的实现: String.proto type .padStart = function(targetLength,padString) { targetLength = targetLength>>0; //floor if number or convert non-number to 0; padString = String( type of padString !== 'undefined' ? padString : ' '); if (this.length > targetLength) { return String(this); else { targetLength = targetLength-this.length; if (targetLength > padString.length) { padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed return padString.slice(0,targetLength) + String(this); 你可以将这个代码片段放在你的应用程序前面,这样你就可以使用padstart方法了。但是,你需要意识到,手动实现这个方法并不是最好的 解决 方案,因为它可能会使你的代码复杂并且难以维护。如果有可能,最好的选择是使用支持ES2017规范的JavaScript引擎来运行你的应用程序。
vue3 setup + ts + vite 项目问题解决:Cannot find module ... or its corresponding type declarations.(ts2307) 61426 vue3 setup + ts + vite 项目问题解决:Cannot find module ... or its corresponding type declarations.(ts2307) Acaibird,: 很难不爱,作者 yyds,yyx yyds EventSource前端使用(需要添加header等自定义配置) 躁动的小灵魂: 引入这个 数据流就要等待好久呀 只有我一个人这样吗 vue3 setup + ts + vite 项目问题解决:Cannot find module ... or its corresponding type declarations.(ts2307) 爱吃水煮鱼~: 原来安装volar要禁用vetur,我说怎么一直安装报错 解决Cannot download “https://github.com/sass/node-sass/releases/download...问题 tuliplover5769: 太感谢啦,成功啦 vue3 setup + ts + vite 项目问题解决:Cannot find module ... or its corresponding type declarations.(ts2307) Boneex: 感谢!!作者的方案加上你的方法不报错了