[vue3+typescript+pinia+axios]踩坑日记-import文件不能识别@符号

# 标题import文件不能识别@符号
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/aa978659bb774819a1e57120e7353e59.png)

问题原因：项目没有正确配置路径别名。

解决步骤:

1.安装 @types/node以获得 path

pnpm

pnpm add -D @types/node

npm

npm install --save-dev @types/node

2.修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // ⬅️ 设置 @ 指向 src 文件夹
    },
  },
})

3.修改tsconfig.json

在原有文件中添加：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["node"],            // ⬅️ 告诉 TypeScript 识别 __dirname、process 等 Node 变量
    "module": "ESNext",
    "moduleResolution": "Node"
  }
}

4.修改 tsconfig.app.json

在原有文件中添加：

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