Vue3 configuration src path alias is @

Configuration of src aliases

When developing a project, the relationship between files and files may be complicated, so we need to configure an alias for the src folder! ! !

// vite.config.ts
import {
    
    defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    
    
    plugins: [vue()],
    resolve: {
    
    
        alias: {
    
    
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

TypeScript compilation configuration

// tsconfig.json
{
    
    
  "compilerOptions": {
    
    
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": {
    
     //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

Solution to WebStorm reporting red wavy line

Volar: Cannot find module '@/components/Test.vue' or its corresponding type declarations.