我们上网或者ai上搜解决方案总是让我们在vite.config.ts配置

resolve: {
   alias: {
     '@': path.resolve(__dirname, './src'), // 相对路径别名配置，使用 @ 代替 src
   },
},

在tsconfig.json中配置如下内容

{
    "compilerOptions": {
        // @路径配置
        "baseUrl": "./",
        "paths": {
          "@/*": ["./src/*"]
    }
  },
}

以前的项目可能不会导致出错，但是现在用vite创建的vue3项目ts配置都会有多个json配置文件以及项目vite配置文件

我们打开tsconfig.app.json就会看到这个让我们写的配置的名字，

所以如果配置在tsconfig.json中一直报错，其实只要将配置写在 tsconfig.app.json 下就好

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    // @路径配置
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },