如何设置PhpStorm/WebStorm以使用Vite别名

Question

Vite还不受PhpStorm/WebStorm的支持，因此给定以下Vite配置：

export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, '/src'),
},
},
});

它无法正确识别以下导入：

import { getAllItems } from '@/api'

如何设置才能正确工作？

Answer 1

在项目的根目录中创建一个JavaScript文件(名称并不重要，我将使用phpstorm.config.js(，并镜像您的别名配置，如下所示：

System.config({
"paths": {
"@/*": "./src/*",
}
});

Php/Webstorm会自动拾取。将其添加到.gitignore中可能是个好主意。

---

另一个选项是按照以下模式创建jsconfig.json：

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

在VSCode 的文档中阅读有关此解决方案的更多信息