vue3中使用路径别名@

701 阅读1分钟

最近准备开发一整套商场系统(主要分为后台管理系统、小程序、小程序管理),然后将会陆续更新项目中遇到的问题以及项目搭建过程

本次开发使用版本:vue3.2 + vite + ts

目的:解决项目中引入路径

点击这里查看配置文档哦

1、由于我们使用了vue3版本path中会存在不兼容问题,这里我们首先下安装下依赖

yarn add @types/node -D

2、接下来进行简单的配置

首先在vite.config.ts中引入

import {resolve} from "path"

image.png 注( extensions: ['.js', '.json', '.ts'] 使用路径别名时想要省略的后缀名,可以自己 增减)

3、最后在tsconfig.json中配置

image.png 注:("baseUrl": ".", 用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响。"paths": { "@/": ["src/"] 用于设置模块名到基于baseUrl的路径映射})