首页 前端知识 vue3 ts vite 项目:解决报错ts(2307)和ts(7016)Could not find xxx.vue‘

vue3 ts vite 项目:解决报错ts(2307)和ts(7016)Could not find xxx.vue‘

2024-09-29 22:09:46 前端知识 前端哥 913 89 我要收藏

vite使用ts创建的vue3项目,用vscode打开时报错:'./App.vue’文件无法找到

为了排除其它插件影响,先清理vscode缓存:

  1. 在路径C:\Users\DELL中找到.vscode文件夹,删除;
  2. 在路径C:\Users\DELL\AppData\Roaming中找到Code文件夹,删除;
    在这里插入图片描述

在这里插入图片描述
3. 安装以下三个插件:
在这里插入图片描述
用vscode打开vue项目文件,main.ts内容如下,其中import App from './App.vue’报错,报错内容是:Could not find a declaration file for module ‘./App.vue’. ‘d:/Go/VUE/vue_ts/myproject/src/App.vue’ implicitly has an ‘any’ type.
在这里插入图片描述
2. 在自定义vue文件中import其他vue文件时报错ts(2307),Cannot find module ‘@/element-plus/mydialog.vue’ or its corresponding type declarations。如下图:
在这里插入图片描述

尝试以下方法:在src文件夹内找到vite-env.d.ts文件,打开后添加以下内容:

	declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const vueComponent: DefineComponent<{}, {}, any>
    export default vueComponent
  }

添加之后如下图:
在这里插入图片描述
使用上面的方法后,错误报警消失了。但是会出现一个新的问题,如果引入了不存在的vue文件, 编译器却不会提示报错 ,只有在npm run 的时候报错,是为什么?
从网上找到了如下的解答:地址
在这里插入图片描述
也就是说,添加以上语句后,无论vue文件是否存在,vscode都不会报错,那么vscode提示的意义何在呢?所以改用其它方法(vite创建项目时默认也没有上面这段代码)。

解决方式:

在项目根目录找到tsconfig.json文件,在"compilerOptions"项内部添加如下代码:

"compilerOptions": {
...............
	// "noImplicitAny": false,
    // "allowJs": true,

	/* paths */
    // "baseUrl": "./",  // As of TypeScript 4.1, baseUrl is no longer required to be set when using paths.
    "paths": {
      "@/*": ["./src/*"]  // 这里需要配置
    }
}

以上修改后,vscode中已经没有报错了。
如果运行时报错:Failed to resolve import “@/xxx/xxx.vue” from “src/router/router.ts”. Does the file exist? 解决方法如下:
方法一:
在项目根目录找到vite.config.ts文件,添加如下代码:

import { fileURLToPath, URL } from 'node:url' /* 新增内容 */

export default defineConfig({
  plugins: [vue()],

  resolve: {
  		/* 新增内容 */
	   alias: {
	      '@': fileURLToPath(new URL('./src', import.meta.url))
	    }
  },

方法二:

  1. 安装path包,命令是 :npm install -g path
  2. 在项目根目录找到vite.config.ts文件,添加如下代码:
import { resolve } from 'path'  /* 新增内容 */

export default defineConfig({
  plugins: [vue()],

  resolve: {
  		/* 新增内容 */
	    alias:{
	      '@':resolve('src')
	    }
  },

解决’./App.vue’文件无法找到,打开App.vue文件,在setup处添加lang=“ts”,如下:

<script setup lang="ts">
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18742.html
标签
评论
发布的文章

jQuery QueryBuilder 教程

2024-10-29 23:10:44

水球图 及各种参数设置

2024-10-29 23:10:13

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