找不到模块“@/stores/xxx”或其相应的类型声明。

问题图示

在 Vue3 项目中，特别是在使用 TypeScript 时，@/ 符号通常是用来代表项目根目录的别名。例如，@/stores/xxx 可能是指向你项目中的某个 store 文件或目录。出现找不到模块的错误通常是由 TypeScript 编译器无法正确解析这些别名导致的。

在Vue 3项目中，特别是在使用 TypeScript 时，@/ 符号通常是用来代表项目根目录的别名。例如，@/stores/xxx 可能是指向你项目中的某个 store 文件或目录。出现找不到模块的错误通常是由 TypeScript 编译器无法正确解析这些别名导致的。

解决方法：

1. 配置路径别名：

   在你的 TypeScript 配置文件 tsconfig.json 中，确保配置了路径别名。例如，你可以在 compilerOptions 下的 paths 中添加别名的映射：

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

   这样配置后，TypeScript 将能够正确地解析 @/stores/xxx 到 src/stores/xxx。

2. 使用 Vue CLI 的别名配置：

   如果你是通过 Vue CLI 创建的项目，通常会有一个 vue.config.js 文件用来配置别名。你可以在这个文件中配置别名，以确保 TypeScript 能够正确解析：

   // vue.config.js
   module.exports = {
     chainWebpack: (config) => {
       config.resolve.alias.set('@', path.resolve(__dirname, 'src'))
     }
   }
   

   或

   // vue.config.ts
   export default defineConfig(({ mode }) => {
     return {
       resolve: {
         alias: {
           '@': resolve(__dirname, './src')
         }
       }
     }
   })
   

   这里假设你的源码目录是 src，你可以根据实际情况进行调整。

3. IDE 设置：

   在某些情况下，IDE（如VSCode）可能需要额外的设置来正确识别别名。确保 IDE 的 TypeScript 解析配置能够与你的 tsconfig.json 文件保持同步，并且能够正确识别别名的路径。

4. 重启 TypeScript 服务：

   如果你在配置完路径别名后仍然遇到问题，可以尝试重启 TypeScript 服务或者 IDE，以确保所有配置生效。

   我之前的文章有提到过，如果配置不生效可以ctrl+shift+p:reload,重新加载编辑器。

   • 链接重新加载vscode开发工具

通过以上方法，你应该能够解决 @/stores/xxx 找不到模块的问题，并使 TypeScript 正确地识别和处理路径别名。