vite - vue 中 typescript 中使用@ 前缀的别名提示错误（cannot find module...）

这个问题通常是由于Vite项目中的TypeScript配置不正确导致的。在Vue项目中使用TypeScript时，如果你希望使用@作为一个别名来代表src目录，可能会遇到模块解析问题。

解释:

TypeScript默认不识别@别名，因为它是由构建系统处理的，而不是由TypeScript本身处理的。如果你在TypeScript中尝试导入以@开头的路径，它会尝试在node\_modules文件夹中查找相应的模块，从而导致模块找不到的错误。

解决方法:

1. 在tsconfig.json文件中，你需要配置baseUrl和paths选项，以指定@别名的解析规则。

{
  "compilerOptions": {
    "baseUrl": ".", // 这代表项目根目录
    "paths": {
      "@/*": ["src/*"] // "*"代表src目录下的任何文件
    }
    // 其他配置...
  }
}

2. 确保Vite配置文件（如vite.config.ts或vite.config.js）中正确处理了别名。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src' // 确保别名正确指向src目录
    }
  }
});

3. 如果你使用的是JavaScript，而不是TypeScript，确保在jsconfig.json或jsconfig.js中设置相同的别名配置。

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

确保重启Vite开发服务器以使配置更改生效。如果以上步骤正确完成，应该不会再看到模块找不到的错误提示。