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

相关推荐
GISer_Jing9 天前
React Next快速搭建前后端全栈项目并部署至Vercel
前端·react.js·前端框架
伍哥的传说9 天前
React 轻量级状态管理器Zustand
前端·javascript·react.js·小程序·前端框架·ecmascript
ZJ_.10 天前
Electron自动更新详解—包教会版
linux·前端·javascript·windows·electron·前端框架·node.js
今日亦是美好的一天10 天前
使用Tailwind CSS和i18n的react实践
前端·react.js·前端框架
伍哥的传说10 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
代码怀疑人生10 天前
使用 Typsecript 和 Tailwind 编译我的 Next js 项目失败
前端框架
非优秀程序员10 天前
阿里、字节、腾讯等大厂都在用的 12 大主流 AI 前端组件库
前端·人工智能·前端框架
鹏多多.10 天前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js·前端框架
伍哥的传说10 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画
BillKu10 天前
Vue3 + TypeScript + xlsx 导入excel文件追踪数据流转详细记录(从原文件到目标数据)
前端·javascript·typescript