vue3：如何使用@符代替 ./src

ps：事先说明，本人使用了vue3+vite+ts+element-plus+pnpm

1. 先运行两个命令

pnpm install path

pnpm install @types/node

2. 找到项目的vite.config.ts文件

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. 重新编译项目

pnpm run dev

4. 测试是否成功

home.vue

<template>
  <test/>
</template>

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

Test/index.vue

<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!