如何设置 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/*"]
    }
  }
}

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