关于vue3+ts使用别名后无ts类型提示的解决方案

先看代码

/vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path'; // 尝试将相对路径转成绝对路径

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 别名
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, 'src'),
      },
    ],
    extensions: ['.js', '.ts', '.vue', '.json'],
  },
});

src/api/todo/index.ts

import request from '@/request/baseAxios';
import { AxiosResponse } from 'axios'
export default interface ITodo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

export const getTodoById = async (id: number): Promise<AxiosResponse<ITodo>> => {
  return request.get(`todos/${id}`);
};

/src/view/Home.vue

<template>
  <h1>Home</h1>
</template>

<script setup lang="ts">
import { getTodoById} from '@/api/todo';

const result = await getTodoById(1)
console.log(result);
// 正常来讲的话在这里result.之后会出现代码提示，但是目前为止是没有代码提示的
</script>

以上是没有代码提示的时候

如何解决该问题

在tsconfig.json文件下的compilerOptions对象中加入配置项

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

这个时候再使用result.的操作就有ts代码提示了