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

Question

PhpStorm / WebStorm 尚不支持 Vite，因此给出以下 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/*"]
    }
  }
}

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

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