vue中使用@没有提示，找不到模块“@/store/user”或其相应的类型声明

前言

情况正如标题那样，我们无法使用@获得提示，而dev等运行时环境是正常的。
也就是说，只是开发环境下@别名没有起作用。

分析

@别名在构建时（无论是run dev还是build），会被解释为其相对项目的相对路径。
比如在vite中配置。

export default defineConfig({
  ...
  resolve: {
    alias: {
      "@": "/src",
    },
  },
  ...
});

这个不是vue项目的默认配置，没有那么严谨，但是用起来没有问题。

提示

我们获得提示通常是通过ts，如果是js则配置jsconfig.json，ts配置tsconfig.json。
主要注意baseUrl和paths。

• baseUrl
  baseUrl表示js代码或者ts代码的基准目录。
  比如写import xx from 'src/xxx'，无论这段代码位于何处，他都是找这个基准目录下的src。
  也就是说如果不写./并不是以相对目录来说的。
  baseUrl通常不用配置，默认就是tsconfig.json所在的目录。
• paths
  显然，当我们写@/开头的路径时，相当于当前路径的src开始。

{
  "include": ["env.d.ts","src/**/*.vue", "src/**/*"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}