Vue3: How to use the @ symbol instead of ./src

ps: In advance, I used vue3+vite+ts+element-plus+pnpm

1. Run two commands first

pnpm install path

pnpm install @types/node

2. Find the vite.config.ts file of the project

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        // Vite路径别名配置
        alias: {
            '@': path.resolve('./src')
        }
    }
})

3. Recompile the project

pnpm run dev

4. Whether the test was successful

home.vue

<template>
  <test/>
</template>

<script setup lang="ts">
import Test from "@/components/Test/index.vue"
</script>

Test/index.view

<template>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button type="danger">Danger</el-button>
</template>

success!