VUE3&TS: Vue3+TS编码上的配置报错处理【不定时更新】

原创已于 2023-01-18 17:10:59 修改 · 3.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#typescript #vue #前端

于 2023-01-18 11:36:53 首次发布

VUE3+TS 专栏收录该内容

9 篇文章

订阅专栏

本文档记录了作者在Vue3和TypeScript结合开发过程中遇到的配置错误及解决方案，包括：从字符串字面量推断出的类型字符串警告、Vue文件不是模块的问题、any类型的使用限制、模块找不到或类型声明缺失的错误，以及更多待解决的问题。

简介

记录自己在学习、开发 Vue3&TS 过程中所遇到的配置报错、警告的解决方式。

记录

1. Type string trivially inferred from a string literal, remove type annotation.

从一个字符串字面推断出的类型字符串，删除类型注释。
解决方法：在 .eslintrc.js 中，添加 rules 项

'@typescript-eslint/no-inferrable-types': 'off'

2. File ‘…xxx.vue’ is not a module

报错某vue文件不是一个模块。
解决方法：格式化并保存一次 .eslintrc.js 文件

3. Unexpected any. Specify a different type.

意外的any。指定一个不同的类型。
解决方法：在 .eslintrc.js 中，添加 rules 项【如果页面上还是有警告显示，重新允许项目即可】

'@typescript-eslint/no-explicit-any': ['off']

4. Cannot find module ‘@/assets/images/xxx.png’ or its corresponding type declarations.

无法找到模块’@/assets/images/xxx.png’或其相应的类型声明。
解决方法：在src目录下新建一个 images.d.ts 的文件，然后重新运行项目

/* images.d.ts文件 */

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

5. Cannot find module ‘@/components/xxx’ or its corresponding type declarations.

无法找到模块’@/components/xxx’或其相应的类型声明。
解决方法：补全文件类型，xxx.vue，xxx.js

import NotFound from '@/components/not-found/index.vue'