在webstorm 中识别vite alias @

tsconfig.json compilerOptions 配置 paths baseUrl

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "compilerOptions": {
    "baseUrl": ".",
    "allowJs": true,
    "sourceMap": true,
    "noUnusedLocals": true,
    "noEmit": false,
    "lib": ["esnext", "dom", "dom.iterable"],
    "types": ["node", "vite/client", "unplugin-vue-define-options", "unplugin-icons/types/vue"],
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["src/*"],
      "#/*": ["types/*"],
      "preact/*": ["./types/empty.d.ts"]
    }
  },
  "include": ["vite.config.*", "types/**/*", "src/**/*", "src/**/*.vue", "build/**/*", ],
  "exclude": ["node_modules", "dist"]
}

vite.config.ts

import path from 'path'

import { defineConfig, loadEnv } from 'vite'
import Vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import DefineOptions from 'unplugin-vue-define-options/vite'
import WindiCSS from 'vite-plugin-windicss'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Inspect from 'vite-plugin-inspect'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import { wrapperEnv } from './build/utils'
import { createProxy } from './build/vite/proxy'

import type { ConfigEnv } from 'vite'

export default defineConfig(({ mode }: ConfigEnv) => {
  const root = process.cwd()
  const env = loadEnv(mode, root)
  const viteEnv = wrapperEnv(env)
  const { VITE_PROXY, VITE_PORT } = viteEnv
  return {
    server: {
      host: true,
      port: VITE_PORT,
      proxy: createProxy(VITE_PROXY),
    },
    plugins: [
      Vue(),
      vueJsx(),
      DefineOptions(),
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia'],
        resolvers: [
          ElementPlusResolver(),
        ],
        dts: 'src/auto-imports.d.ts',
      }),
      Components({
        dts: 'src/components.d.ts',
        resolvers: [
          ElementPlusResolver({ importStyle: 'sass' }),
          IconsResolver({
            prefix: 'icon',
            customCollections: ['custom'],
            enabledCollections: ['ep', 'ri'],
          }),
        ],
      }),
      Icons({
        scale: 1,
        customCollections: {
          custom: FileSystemIconLoader(
            './src/assets/icons',
            svg => svg.replace(/^<svg /, '<svg fill="currentColor" '),
          ),
        },
      }),
      WindiCSS(),
      Inspect(),
    ],
    resolve: {
      alias: [
        { find: '/^~/', replacement: '' },
        { find: '@', replacement: path.resolve(__dirname, 'src') },
        { find: '~@', replacement: path.resolve(__dirname, 'src') },
      ],
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
        },
      },
    },
  }
})