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

How to setup PhpStorm / WebStorm to work with Vite aliases?

PhpStorm / WebStorm 尚不支持 Vite,因此给出以下 Vite 配置:

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

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

import { getAllItems } from '@/api'

如何设置才能正常工作?

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

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

Php/Webstorm 会自动拾取它。将它添加到 .gitignore.

可能是个好主意

另一种选择是按照以下模式创建 jsconfig.json

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

VSCode

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