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

编程问答 2022-05-15

问题描述

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

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