vue3+vite中使用 index.ts 导出的文件eslint 报错 ts(2305)

Question

vue3+vite中，使用 index.ts 导出的文件，eslint 报错 ts(2305)
src/componnets/index.ts：

导入使用时直接cv的，仔细检查过没有拼错，ts却报错：

但是！其他地方使用同样的方式却没有问题，比如，views里的目录内使用index.ts导出：

使用时完全没有问题：

为了保持导入方式一致，还改成了绝对路径@，仍然没有问题。
这是什么原因？

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

图片内容

1. 第一张图片展示了一个资源管理器的视图，其中包含了index.ts文件，并且展示了export default语句用于导出组件的情况。
2. 第二张图片展示了一个Vue组件的模板部分，其中使用了CardTemplate组件，并且包含了一些数据配置。
3. 第三张图片展示了另一个资源管理器的视图，其中包含了index.ts文件，并且展示了多个组件的导出。
4. 第四张图片展示了一个Vue组件的结构，其中包括了多个使用Card组件的示例。

问题概括

问题的目的是要解决在使用Vue 3和Vite项目中，通过index.ts导出组件时遇到的eslint报错ts(2305)。这个问题在某些情况下出现，但在其他情况下使用相同的方法却没有问题。

问题出现原因

根据提供的信息和图片内容，可能出现此问题的原因包括但不限于：

• eslint的配置可能对某些目录或文件有特定的规则设置。
• tsconfig.json中的路径解析配置可能存在问题，导致TypeScript无法正确识别别名或路径。
• 可能是导入语句的语法错误，或者在使用默认导出时的语法有误。

问题解决方案

基于问题概括和图片内容，以下是可能的解决方案：

1. 检查eslint配置：确保eslint配置没有对src/components目录设置特殊的规则，这些规则可能会与views目录的规则冲突。

2. 检查tsconfig.json：确保TypeScript的配置文件tsconfig.json中的paths配置正确，能够正确解析@别名。

3. 修改导入语法：如果错误是由于导入语法问题，尝试将默认导出的语法从export default as ComponentName修改为export { default as ComponentName }。

4. 使用绝对路径：尽管你已经尝试过，但确保所有路径都是正确的，并且没有拼写错误。

5. 重启Vite开发服务器：有时候，重启Vite开发服务器可以解决一些缓存导致的问题。

提供代码

由于问题可能与项目配置相关，而不是特定的代码段，所以这里不提供具体的代码。但是，以下是一些可能需要检查或修改的配置示例：

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

// .eslintrc.js 或类似的eslint配置文件
module.exports = {
  // ...其他配置
  "rules": {
    // ...其他规则
  }
};

代码运行方式

运行代码需要Node.js环境和Vite。在项目根目录下运行以下命令：

npm install
npm run dev

代码预期运行结果

预期结果是，修改配置后，eslint不再报错，且项目能够正常运行。

推荐相关链接

• Vue 3官方文档
• Vite官方文档
• ESLint官方文档
• TypeScript官方文档

这些链接提供了Vue 3, Vite, ESLint和TypeScript的官方指导和配置信息，有助于解决配置和语法相关的问题。