vite-alias配置，@别名，Vue3+TS的配置

文章讲述了如何在Vite项目中手动配置路径别名，包括在`vite.config.ts`中添加alias，以及在TypeScript项目中处理`__dirname`错误并设置`tsconfig.json`。作者推荐使用自定义配置选项，这样可以避免手动安装依赖和配置，同时享受vite-alias带来的便利和智能提示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果选择这两种配置的话，需要自己手动安装依赖和配置，因为这种快速创建项目，里面什么都没有，包括pinia和router(路由)都没有，什么都需要你自己手动去安装，自己再去手动配置。如果需要配置@别名路径话，需要做如下配置。

需要加入 path 依赖:

npm install path

在 vite.config.ts 文件的配置:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src")
    }
  }
})

在 typescript 项目中进行配置

在 vite + typescript 中配置路径别名时需要注意, 直接使用__dirname的话, typescript 会报错cannot find name ‘__dirname’, 这时候需要拉取依赖

npm install -D @types/node

来给让 typescript 识别出. __dirname
并且需要在ts.config.json内设置:

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

注意, 若在src前无./, 可能会报错:

Non-relative paths are not allowed when 'baseUrl' is not set. Did you forget a leading './'?

这是因为需要在ts.config.json中指定相对路径, 只需要指定相对路径即可.
直接把如下代码粘贴到ts.config.json中

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

这样配置之后，就有智能提示了
来指定项目的基本路径. 这时候在 vscode 中路径引入时打出@之后, 就可以提示路径了.
并且设置baseUrl后, 可以不用在paths配置内使用相对路径了.

来自山里令山的创作https://blog.youkuaiyun.com/qq_46266305/article/details/131198257

reference

https://bobbyhadz.com/blog/typescript-cannot-find-name-dirname

在这里插入图片描述
我更推荐大家创建项目的话，看如上图箭头所示，选择自定义配置项，不要选择JavaScript和TypeScript，因为可以自由选择想要配置的东西。*
如果你选择自定义配置的话，可以自由选择想要配置的东西，当然vite-alias，这个也是自动配置好的，不需要你自己在手动的安装依赖和配置ts.config.json，就可以使用@，来引入路径，同时也有智能提示