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

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

2024-06-06 00:06:37 前端知识 前端哥 982 275 我要收藏

在初次使用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~~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10954.html
标签
评论
发布的文章

js 指定光标位置

2024-06-10 23:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!