vite+vue3+ts解决别名引用@/api/user找不到相应的模块报错问题

背景:使用@引入项目资源,报错找不到相应的模块,不使用@又不会出现报错,大概率是配置问题

前提:确保项目中存在目标文件

解决步骤:

1.安装依赖 @types/node 用于处理别名不生效问题

npm i @types/node -D

2.在vite.config.ts中配置别名

resolve: {
    // ↓路径别名
    alias: {
      "@": resolve(__dirname, "./src")
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },

3.在tsconfig.app.json中添加

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

即可解决,