
vue-cli创建项目自定义添加router

执行npm run serve后可能会报错TS7016: Could not find a declaration file for module 'vue-router'

src目录下添加shims-vue-router.d.ts
// 声明一个名为 "vue-router" 的模块
declare module "vue-router" {
// 从 "vue-router/dist/vue-router" 导入一些类型
import type {
RouteRecordRaw, // 路由记录的原始类型,用于定义路由配置
Router, // Vue Router 的实例类型
RouterOptions, // 创建路由器时的选项类型
} from "vue-router/dist/vue-router";
// 创建一个路由器实例的函数,接受路由选项作为参数并返回路由器实例
export function createRouter(options: RouterOptions): Router;
// 创建基于 HTML5 History API 的历史记录模式的函数,可选的 base 参数用于指定基础路径
export function createWebHistory(base?: string): any;
// 创建基于内存的历史记录模式的函数,可选的 base 参数用于指定基础路径
export function createMemoryHistory(base?: string): any;
// 创建基于哈希模式的历史记录模式的函数,可选的 base 参数用于指定基础路径
export function createWebHashHistory(base?: string): any;
// 重新导出导入的类型,方便在其他地方使用
export { RouteRecordRaw, Router, RouterOptions };
// 导出 "vue-router/dist/vue-router" 中的所有其他类型
export * from "vue-router/dist/vue-router";
}报错原因是TypeScript编译器无法找到vue-router模块的声明文件。
在Vue项目中使用TypeScript时,TypeScript需要知道导入模块的类型信息才能进行类型检查。当执行npm run serve时,TypeScript编译器在解析代码中导入vue-router模块的语句时,找不到对应的声明文件,就会抛出TS7016: Could not find a declaration file for module 'vue-router'错误。
这可能是因为项目中虽然安装了vue-router库,但TypeScript不知道如何识别它的类型。通常情况下,npm安装的包如果没有附带类型声明文件(.d.ts),或者项目配置中没有正确指定类型声明文件的查找路径,就会出现此类问题。
而在src目录下添加shims-vue-router.d.ts文件,通过declare module "vue-router"声明了vue-router模块,并手动定义了该模块导出的函数和类型,这样TypeScript编译器就能正确识别vue-router模块的类型信息,从而解决找不到声明文件的问题。