vite + ts/typescript + vue3 配置别名 别名不生效问题

在Vite + TypeScript + Vue 3项目中配置路径别名时，可以通过修改tsconfig.json或vite.config.ts来实现。

解决方案1：修改tsconfig.json

在tsconfig.json中添加compilerOptions的paths属性来配置别名：

{
  "compilerOptions": {
    "baseUrl": ".", // 这个选项决定了其他路径分析都是相对于此目录
    "paths": {
      "@/*": ["./src/*"] // 这里配置了一个别名 @ 指向 ./src 目录下
    }
    // ...其他配置
  }
}

解决方案2：修改vite.config.ts

在Vite的配置文件中使用resolve配置别名：

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

确保你的别名配置正确无误，并且重启Vite服务器以使配置生效。如果别名仍然不生效，检查是否有缓存问题或者其他配置冲突。