前端 - WebStorm中Electron-Vite路径别名导入问题，如何解决？

Question

最近在用electron-vite创建的项目中，使用路径别名import { BookInfo } from '@interface/book'导入类型时，一直报错Vue: Cannot find module @interface/book or its corresponding type declarations.，改成import { BookInfo } from '../../../interface/book'就正常了,写成@/interface/book也不行，虽然运行正常但是一直提示这个错误，用的时webstorm，换了vscode就不报错了。

想问下是webstorm的问题吗,还是我哪里的设置有问题

当我把主进程里的改为'@/interface/book'时，运行报错了，但是渲染进程的vue文件里改了就可以正常运行
这是我的tsconfig.node.ts

{  "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",  "include": [    "electron.vite.config.*",    "src/main/**/*",    "src/preload/**/*",    "src/interface/*",    "src/config/*"  ],  "compilerOptions": {    "composite": true,    "types": [      "electron-vite/node"    ],    "baseUrl": ".",    "paths": {      "@/*": ["src/*"],      "@interface/*": ["src/interface/*"],      "@config/*": ["src/config/*"]    },  }}

Answer 1

和OP你的WebStorm的版本有关系可能不支持 tsconfig.node.ts 的读取？
没办法自动识别到配置文件，所以需要你手动去添加别名或者。这个可以看一下 WebStorm 指引里面关于 Use path aliases 部分的说明 �� #Use path aliases - Code Style. JavaScript | WebStorm Documentation

Answer 2

你在webpack.config里的alias配置了吗

Answer 3

WebStorm中的路径别名导入问题通常与IDE的配置或项目的配置有关。根据您提供的信息，以下是一些可能的解决方案：

1. 确保路径别名在tsconfig.json或jsconfig.json中正确配置：

   对于TypeScript项目，别名应该在tsconfig.json文件的compilerOptions.paths中配置。对于JavaScript项目，可以在jsconfig.json中做类似的配置。

   {  "compilerOptions": {    "baseUrl": ".", // 这通常是项目的根目录    "paths": {      "@interface/*": ["src/interface/*"] // 映射到你的实际目录结构    }  }}

请确保baseUrl和paths中的映射关系正确指向了你的项目目录结构。

2. 重启WebStorm：

   有时候，IDE可能无法立即识别新的配置或更改。尝试重启WebStorm来刷新配置。

3. 检查WebStorm的TypeScript或JavaScript支持：

   确保WebStorm正确支持你的项目类型（TypeScript或JavaScript）。你可以在WebStorm的设置中查看和修改这些设置。

4. 使用WebStorm的Invalidate Caches / Restart功能：

   在WebStorm中，你可以使用File > Invalidate Caches / Restart...来清除缓存并重启IDE。这有时可以解决识别问题。

5. 检查项目依赖和类型声明：

   确保你的项目已安装所有必要的依赖，并且所有类型声明都已正确引入。

6. 检查WebStorm的插件和更新：

   确保你的WebStorm安装了所有必要的插件，并且版本是最新的。有时，IDE的更新可能修复了此类问题。

7. 检查代码编辑器设置：

   确保WebStorm的TypeScript或JavaScript代码编辑器设置没有禁用别名解析或其他相关功能。

8. 查看WebStorm的日志和错误报告：

   如果上述方法都不起作用，你可以查看WebStorm的日志文件或错误报告，看是否有更详细的错误信息可以帮助你定位问题。

如果你在WebStorm中仍然遇到问题，但在VSCode中没有问题，那么这很可能与WebStorm的配置或支持有关。你可以尝试查看WebStorm的官方文档或社区论坛，看看是否有其他人遇到了类似的问题，并找到了解决方案。此外，你也可以考虑向WebStorm的官方支持团队寻求帮助。