vue3+ts 配置别名@报错

问题如图:

主要的原因：ts语法检测不通过，只配置了vue.config.ts文件，还需要在 tsconfig.json中配置

vue.config.ts：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  }
})

tsconfig.json 新增选项paths配置

{
    // https://www.tslang.cn/docs/handbook/compiler-options.html
  "compilerOptions": {
    "target": "ESNext",// 指定ECMAScript目标版本 "ES3"（默认）
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true, // 启用所有严格类型检查选项。
    "jsx": "preserve", // 在 .tsx文件里支持JSX： "React"或 "Preserve"。查看 JSX。
    "sourceMap": true, //生成相应的 .map文件。
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"], // 编译过程中需要引入的库文件的列表。
    "skipLibCheck": true, // 忽略所有的声明文件（ *.d.ts）的类型检查。
    "paths": { // 模块名到基于 baseUrl的路径映射的列表。
      "@/*": ["./src/*"]
    },
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  // 引用的工程，是一个对象的数组，指明要引用的工程：
  "references": [{ "path": "./tsconfig.node.json" }]
}

其他：tsconfig.json是什么？

• compilerOptions：ts项目编译时，遵守的一些规则，比如，默认是不允许ts、js混合编译，把allowJs设置为true，就会build成功。（不推荐设置为true）
• include：项目中哪些位置需要编译ts
• exclude：项目中哪些位置需要排除编译ts，默认排除node_modules，bower_components，jspm_packages和<outDir>目录。
• references：项目引用
• files：指定一个包含相对或绝对文件路径的列表
• extends: 继承配置