Vite + Vue3 +TS 项目router配置踩坑记录! ===＞“找不到模块“vue-router”或其相应的类型声明。“＜===

已于 2023-07-28 17:51:09 修改
阅读量1.5w 收藏 38
点赞数 42
文章标签： vue.js 前端 javascript
于 2023-07-28 17:45:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_60155232/article/details/131984648
版权
在使用Vue3、Vite和TypeScript构建项目时，作者遇到了找不到模块“vue-router”的类型声明以及使用useRouter时遇到“Cannotreadpropertiesofundefined(readingpush)”的错误。通过在vite-env.d.ts中声明模块和调整useRouter调用的位置解决了这两个问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

第一个坑："找不到模块“vue-router”或其相应的类型声明。"

解决 

 第二个坑：Cannot read properties of undefined (reading 'push')

解决：将useRouter()方法的执行位置尽量放靠上一点就行了。

最近在使用vite + vue3 + typescript 写一个项目，在用路由router的时候踩了坑，记录一下。

其实想吐槽的不是这些坑，而是百度的结果，一堆~文章内容都是一样的，还是解决不了问题的那种！！！抄袭意义何在？...

好了，言归正传。

第一个坑："找不到模块“vue-router”或其相应的类型声明。"

我在vue组件中引入vue-router的useRouter函数时，报的错

奇怪的是，我在ts文件中引入就不会报这个错误？

反正遇到的时候是无厘头的，百度了更是无厘头，搜索出来的都是啥，都是一样的...

整了很久.....

 终于，换个姿势搜索，找到了解决方案，很简单。

解决 

在vite-env.d.ts中，把找不到的模块名称声明一下就行。

这样就好了... 

 可是！麻绳专挑细处断，厄运专找苦命人，刚解决完一个，又来一个！！！

 第二个坑：Cannot read properties of undefined (reading 'push')

 代码片段：

 

这么说？怎么可能？吓的我马上打印router验验真伪： 

 

 

 好吧，它是undefined！！！！人麻了...

解决：将useRouter()方法的执行位置尽量放靠上一点就行了。

 好了，我的路由可以用了  >.<  ，今晚的饭还是香的。

vue3 setup + ts + vite 项目问题解决：Cannot find module ... or its corresponding type declarations.（ts2307）
geejkse_seff的博客
03-01 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 { getDat
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
关于vue+router+webpack项目开发前期报错：找不到 module vue-router
DavidFFFFFF的博客
06-28 4618
这是报错Can't resolve 'vue-router(找不到路由模块)main.jsimport Vue from 'vue' import VueRouter from 'vue-router'; import App from './App.vue';Vue.use(VueRouter) import routes from './routers.js'//创建router实例 cons
vue3 + ts报错：找不到模块“@/xxx/xxx.vue”或其相应的类型声明。ts(2307)
最新发布
m0_73866100的博客
04-26 612
命令创建了一个基于 Vue 3 和 TypeScript 的项目后，首次在 VS Code 中打开时，发现在代码中引入。要让 TypeScript 理解这些文件，需要特定的 Vue 编译器插件或类型声明进行处理。文件，我们需要为其提供一个类型声明文件，明确告知 TypeScript 如何处理这类文件。文件是一种特殊的文件格式，它包含了 Vue 组件的模板 (文件时，由于找不到相应的类型声明文件 (保存文件后TypeScript就可以识别。)，就会抛出 “找不到模块” 的错误。将以下代码复制到你创建的。
找不到模块“vue-router”或其相应的类型声明。ts(2307)
qq_37899792的博客
01-30 4183
然后选择“Extensions：Show Built-in Extensions”。step4：禁用（工作区） 【Disable (Workspace)】step3：在插件搜索框内输入。
Vite+Vue3 报错 找不到模块vue router或其相应的类型声明ts 2307
qq_60608503的博客
08-26 1092
原来我是依赖没装好， 如果使用的是 TypeScript，建议安装。将依赖安装到对应文件夹下。
vue3 报错解决：找不到模块或其相应的类型声明。（Vue 3 can not find module）
hfwangyl的博客
10-12 1万+
4、点击“TypeScript and JavaScript Language Features”右下角的小齿轮，然后选择“Disable (Workspace)”。1、在当前项目的工作空间下，用 Ctrl + Shift + P (macOS：Cmd + Shift + P) 唤起命令面板。2、输入 built，然后选择“Extensions：Show Built-in Extensions”。5、重新加载工作空间。3、在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。
找不到模块“XXX.vue”或其相应的类型声明。ts(2307)(发生在rrouter.ts)
zhengwenhaodezw的博客
09-01 1万+
1.报错环境说明.一直使用的是vue2.6版本，也没有引入typescript写法，但是总是要学习新东西，感觉还是从别人的项目看看3.0项目的结构再开始学比较合适，但是新下载的项目还没有启动就报错如题目所示，后面下载依赖之后也能够运行，但是vs code一直报着这个错，这个其实很难忍受。 2.解决方案说明.在前端QQ群中发起提问，热心观众帮忙解决了，步骤如下 1）在项目的根目录下新建一个shims.d.ts的文件 2）在文件shims.d...
vscode报错：找不到模块“vue”或其相应的类型声明。ts(2307)
zmy967131的博客
07-27 6381
重点：Ctrl+Shift+P 唤起命令面板，配置 volar 的 typescript版本。
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
通过这个示例项目，你可以了解到如何在 Vue3.x、Vite 和 TypeScript 的环境中设置和使用 Vue Router 4.x，这将对你的前端开发技能有极大的提升。同时，实践项目也能帮助你更好地理解和掌握这些技术的实战应用。
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3 + Vite + TS创建项目，提示找不到模块文件或其相应的类型声明的问题优化方案
一学就会的小天才
03-05 826
通过创建 shims-vue.d.ts 文件并确保路径正确，TypeScript 将能够正确识别 .vue 文件，从而解决找不到模块或类型声明的问题。小提示：A dynamic import call in ES5 requires the ‘Promise’ constructor. Make sure you have a declaration for the ‘Promise’ constructor or include ‘ES2015’ in your ‘–lib’ option.
vscode报警告‘找不到模块“vue”或其相应的类型声明‘
m0_46165586的博客
02-28 5054
vscode报警告'找不到模块“vue”或其相应的类型声明'，但是代码是能正常运行起来的。
vue3+ts 报错解决：找不到模块或其相应的类型声明。（Vue 3 can not find module）
热门推荐
weixin_44166849的博客
03-29 2万+
3.检查 TypeScript 配置：如果项目中有 tsconfig.json 或 jsconfig.json 文件，确保该文件包含了正确的路径别名或根路径。4.检查 Vue 配置：如果使用了如 webpack 或 Vite 这样的构建工具，确保相关的配置能够正确处理 .vue 文件。1、在当前项目的工作空间下，用 Ctrl + Shift + P (macOS：Cmd + Shift + P) 唤起命令面板。1.检查文件路径：确保 文件的路径是正确的，并且确实存在于 components 目录下。
vue3 报错解决：找不到模块或其相应的类型声明。
weixin_51828648的博客
02-21 1万+
【代码】vue3 报错解决：找不到模块或其相应的类型声明。
vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明
youthwsj的博客
01-12 3756
vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明。后来看到说可以在src根目录下创建一个后缀为.d.ts的文件，问题解决了，不再报模块找不到的错误了。这对我来说根本没有用。
vite+ts出现红色波浪线；找不到模块“vue-router
m0_60289222的博客
05-09 4203
提示：找不到模块“vue-router”。你的意思是要将 "moduleResolution" 选项设置为 "node"，还是要将别名添加到 "paths" 选项中?
vite + vue3 + ts + pinia + vue-router + axios + scss + 自动导入api
08-09
对于使用 Vite + Vue3 + TypeScript + Pinia + Vue Router + Axios + SCSS 并自动导入 API 的设置，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了 Node.js，并且版本大于等于 12.0.0。 2. 创建一个新的 Vue 项目，可以使用 Vue CLI 或者手动创建一个空文件夹。 3. 在项目根目录下，打开终端并执行以下命令安装 Vite： ```bash npm init vite@latest ``` 按照提示选择你的项目配置，包括选择 Vue 3、TypeScript 和其他选项。 4. 进入项目目录并安装依赖： ```bash cd your-project-name npm install ``` 5. 安装 Pinia 插件： ```bash npm install pinia ``` 6. 创建一个 `src/store` 目录，并在其中创建 `index.ts` 文件，用于定义和导出你的 Pinia store。 ```typescript // src/store/index.ts import { createPinia } from &#39;pinia&#39; export const store = createPinia() // 可以在这里定义你的 store 模块 ``` 7. 在项目根目录下创建 `src/api` 目录，用于存放 API 请求相关的文件。 8. 在 `src/api` 目录下创建一个 `index.ts` 文件，用于自动导入所有 API 文件。 ```typescript // src/api/index.ts const modules = import.meta.globEager(&#39;./*.ts&#39;) const apis: any = {} for (const path in modules) { if (path !== &#39;./index.ts&#39;) { const moduleName = path.replace(/^.\/|\.ts$/g, &#39;&#39;) apis[moduleName] = modules[path].default } } export default apis ``` 这样，你就可以在 `src/api` 目录下创建各种 API 请求的文件，例如 `user.ts`： ```typescript // src/api/user.ts import axios from &#39;axios&#39; export function getUser(id: number) { return axios.get(`/api/user/${id}`) } ``` 然后，在你的组件中使用自动导入的 API： ```typescript import { defineComponent, ref } from &#39;vue&#39; import { useUserStore } from &#39;@/store&#39; import apis from &#39;@/api&#39; export default defineComponent({ setup() { const userStore = useUserStore() const userId = ref(1) const fetchUser = async () => { const response = await apis.user.getUser(userId.value) userStore.setUser(response.data) } return { userId, fetchUser, } }, }) ``` 以上就是使用 Vite + Vue3 + TypeScript + Pinia + Vue Router + Axios + SCSS 并自动导入 API 的基本设置。你可以根据自己的需求进一步配置和扩展。希望对你有所帮助！
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mao.O

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值