Vue TypeScript 模块找不到问题完整指南

Vue TypeScript 中解决模块找不到问题的指南

问题：

在 Vue TypeScript 项目中导入 .vue 文件时，可能会遇到 "无法找到模块或其对应的类型声明" 错误。

解决方案：

为了解决此错误，请按照以下步骤进行操作：

• 检查 tsconfig.json：

  • 确保 tsconfig.json 中的 include 和 paths 配置正确。

• 配置 webpack：

  • 在 webpack 配置中，将 ts-loader 的 appendTsSuffixTo 选项设置为 [/\.vue$/u]。

• 重启 TypeScript 服务：

  • 重新启动 TypeScript 服务以应用更改。

完整示例：

tsconfig.json：

{
  "compilerOptions": {
    // ...其他配置
    "baseUrl": "./backend/app",
    "paths": {
      "@/*": ["./backend/app/*"]
    }
  },
  "include": ["backend/app/**/*.ts", "backend/app/** /*.vue"],
  "exclude": ["node_modules"]
}

webpack 配置：

{
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.ts?$/u,
        loader: 'ts-loader',
        exclude: /node_modules/u,
        options: {
          appendTsSuffixTo: [/\.vue$/u],
        },
      }
    ]
  }
}

其他提示：

• 使用最新版本的 TypeScript 和 ts-loader。
• 清理 node_modules 目录并重新安装依赖项。
• 如果问题仍然存在，请提供项目的完整代码以进行进一步调试。

常见问题解答：

问：ts-loader 的 appendTsSuffixTo 选项的作用是什么？

答：它告诉 ts-loader 在处理 .vue 文件时添加 .ts 后缀。

问：为什么需要重启 TypeScript 服务？

答：重新启动 TypeScript 服务会刷新其对项目的了解，应用配置更改。

问：如果我使用的是非 Vue 项目，此解决方案是否仍然有效？

答：是的，这些步骤也适用于非 Vue 项目，只要您正在使用 TypeScript 和导入模块时遇到找不到模块的问题。

问：如果我仍然遇到问题，该怎么办？

答：检查 webpack 配置、确保 ts-loader 正确安装，并尝试清除缓存。

问：此解决方案适用于哪个版本的 TypeScript 和 ts-loader？

答：此解决方案适用于 TypeScript 4.7+ 和 ts-loader 9.3+。