配置@为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 应该也能成功将项目运行起来。

相关推荐
一位搞嵌入式的 genius6 小时前
前端实战开发(二):React + Canvas 网络拓扑图开发:6 大核心问题与完整解决方案
前端·前端框架
duansamve1 天前
React 18+TS中使用Cesium 1.95
react.js·typescript·cesium
岁岁岁平安1 天前
SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室(附完整源码参考)
java·spring boot·websocket·网络协议·typescript·vue
硅谷工具人2 天前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
whltaoin3 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
Baklib梅梅3 天前
2025文档管理软件推荐:效率、安全与协作全解析
前端·ruby on rails·前端框架·ruby
简小瑞3 天前
VSCode 源码解密:一个"无用"属性背后的精妙设计
typescript·visual studio code
FogLetter3 天前
TypeScript 泛型:让类型也拥有“函数式”超能力
前端·typescript
Keepreal4963 天前
Typescript中type和interface的区别
前端·typescript