怎么在 Vite+Vue3+TS 项目中使用 @ 指代 src

实现在 Vite+Vue3+TS 项目中使用 @ 指代 src的效果。比如：

<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
import { a } from '@/utils/a'
const a: a = 1
</script>

<template>
  APP
  <p>{{ a }}</p>
  <hr>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped></style>

安装包

pnpm i path

pnpm i @types/node

ps:不安装@types/node，__dirname会报错

配置 vite.config.ts 文件

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

import { resolve } from "path"; // 引入方法

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [ // 配置 @ 指代 src
      {
        find: "@",
        replacement: resolve(__dirname, "./src"),
      },
    ],
  }
});

配置 tsconfig.json 文件

导入ts文件需要配置，不然会在vscode里报错！！！

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": [ "src/*" ]
    }
  },
  ...
}