【Vue3】详细解决方案：找不到模块“@/views/Login.vue”或其相应的类型声明或Failed to resolve import “@/views/Login.vue“

在初次使用Vue3的路由懒加载时，可能你遇到了这个报错：找不到模块“@/views/Login.vue”或其相应的类型声明或者Failed to resolve import "@/views/Login.vue"或找不到模块“path”或其相应的类型声明 。那么此文章，是此报错的一系列详细解决方案。

1.解决代码编译器红色波浪线

如何干掉这个让人看起来非常不爽的大红波浪线？
移步src\vite-env.d.ts，加入以下代码，解决红色大波浪~~

/// <reference types="vite/client" />
// 配置这个文件是 解决错误：找不到模块“@/views/Login.vue”或其相应的类型声明。ts(2307)
// 这段代码告诉 TypeScript，所有以 .vue 结尾的文件都是 Vue 组件，可以通过 import 语句进行导入。这样做通常可以解决无法识别模块的问题。
declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}

2.解决代码编译报错

虽然红色大波浪干掉了，但是事情没有这么简单，启动项目会发现编译报错：Failed to resolve import “@/views/Login.vue” 。
需要在vite.config.ts配置路径别名

2.1 vite.config.ts配置路径别名

import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  //   配置路径别名
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

这样配置之后会发现，欸，页面可以正常访问了。
but！代码红色报错提示：找不到模块“path”或其相应的类型声明。这是由于node不支持ts语法导致哒。需要安装@types/node。

2.2 安装@types/node

npm install @types/node --save-dev

一般来说到这儿，应该就结束了。
But，俺这里并没有结束，所以88不了。
俺安装的时候报错了，没安装下来。

// 报错信息
npm ERR! While resolving: vue3-template@0.0.0
npm ERR! Found: eslint@9.1.1
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^9.1.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^8.56.0" from typescript-eslint@7.7.1
npm ERR! node_modules/typescript-eslint
npm ERR!   dev typescript-eslint@"^7.7.1" from the root project

这个报错的意思是发生了依赖版本冲突。项目中安装了eslint的9.1.1版本，但是typescript-eslint的7.7.1版本需要一个与eslint 8.x兼容的peer依赖。通过调整eslint依赖版本为^8.56.0解决此问题。

最后，8888888888888888~~