将tsconfig配置中的paths提取出来放到resolve.alias中 图一乐欢迎尝试

npm i vite-plugin-tsconfig-paths2 -D

1import { defineConfig } from "vite";
2import vue from "@vitejs/plugin-vue";
3import tsconfigPath from "vite-plugin-tsconfig-path";
4
5// https://vitejs.dev/config/
6export default defineConfig({
7  plugins: [vue(), tsconfigPath()],
8});
9

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "useDefineForClassFields": true,
5    "module": "ESNext",
6    "lib": ["ES2020", "DOM", "DOM.Iterable"],
7    "skipLibCheck": true,
8
9    "moduleResolution": "bundler",
10    "allowImportingTsExtensions": true,
11    "resolveJsonModule": true,
12    "isolatedModules": true,
13    "noEmit": true,
14    "jsx": "preserve",
15
16    "strict": true,
17    "noUnusedLocals": true,
18    "noUnusedParameters": true,
19    "noFallthroughCasesInSwitch": true,
20    "baseUrl": ".",
21
22    "paths": {
23      "@/*": ["src/*"], 
24    }
25  },
26  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
27  "references": [{ "path": "./tsconfig.node.json" }]
28}
29

1<script setup lang="ts">
2import HelloWorld from "@/components/HelloWorld.vue";
3</script>
4
5<template>
6  <div>
7    <a href="https://vitejs.dev" target="_blank">
8      <img src="/vite.svg" class="logo" alt="Vite logo" />
9    </a>
10    <a href="https://vuejs.org/" target="_blank">
11      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
12    </a>
13  </div>
14  <HelloWorld msg="Vite + Vue" />
15</template>
16
17<style scoped>
18.logo {
19  height: 6em;
20  padding: 1.5em;
21  will-change: filter;
22  transition: filter 300ms;
23}
24.logo:hover {
25  filter: drop-shadow(0 0 2em #646cffaa);
26}
27.logo.vue:hover {
28  filter: drop-shadow(0 0 2em #42b883aa);
29}
30</style>
31