配置@为src - 技术栈

Vue 中配置 @ 为 src

记录一下配置 @ 为 src 的最简步骤，备忘。

这篇教程基于一个刚刚由 vite 创建好并安装完依赖的项目（vue + ts）。

配置 tsconfig.app.json

其实有三个 tsconfig，但是 App 这个组件直接使用的就是 tsconfig.app.json 这个配置文件，所以配置这个是肯定能够生效的。如果设置了 tsconfig.app.json extends tsconfig.json 的话，也可以配置在 tsconfig.json 里面。

在该配置文件中添加配置项：

json 复制代码

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

这一步配置完成，其实已经可以在 App.vue 里面使用 @ 了，但是使用 pnpm run dev 时会报错：

bash 复制代码

Error: The following dependencies are imported but could not be resolved:
...

报这个错误是因为我们配置的 tsconfig.app.json 实际上是给 vscode 看的，vite 是用不了这个配置的，我们需要给 vite 也配置以下 @ 的路径。

解释一下这个配置项（补充）：

CompilerOptions：Typescripts 中配置编译选项的主入口。baseUrl 和 paths 都是这个配置对象的子配置。

baseUrl：设置相对导入路径的基准路径，"." 表示当前配置文件所在路径。
paths：配置路径别名。

配置 vite.config.js

需要在 vite.config.js 里面写入如下配置：

js 复制代码

// 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') // 配置路径
    }
  }
})

其实到这一步已经 ok 了，如果你运行项目，会发现项目已经可以正常地跑起来了。但是 VSCode 有可能会报错：

path 是 Node.js 的内置模块，而我们使用的 TypeScripts 依赖类型声明文件进行类型检查和代码提示。在没有显式声明 Node 类型的前提下，VSCode 中的 TypeScript 服务会找不到 path 模块的定义，然后就会在编辑器里报错：Cannot find module 'path' or its corresponding type declrations.ts(2307)。但是运行 pnpm run dev 不会出错，因为 node 本身是可以解析 path 的。

解释一下这段配置（补充）：

resolve 是 vite 的模块解析配置对象，用于定义 vite 在解析 import 路径时的行为。
alias 是 resolve 里的一个字段，用于配置路径别名。

安装 @types/node

运行命令：

bash 复制代码

pnpm i -D @types/node

然后在 tsconfig.node.json 里面添加配置项：

js 复制代码

{
  "compilerOptions": {
    "types": ["node"],
  }
}

完成后，重启一下 VSCode，应该就能正常识别 node 了，pnpm run dev 应该也能成功将项目运行起来。