介绍

vite-aliases支持Vite4.x版本。

vite-aliases是一款vite社区插件，会自动生成一些import路径别名方面的设置（项目根路径下jsconfig.json可自行配置）。

vite-aliases开源地址：https://github.com/subwaytime/vite-aliases

安装

npm i vite-aliases -D

vite.config.js配置

import { ViteAliases } from 'vite-aliases'export default {plugins: [ViteAliases()]
};

package.json配置

由于vite-aliases插件仅支持ESM，需要在项目根路径下的package.json下配置如下代码：

{"type": "module"
}

项目信息

package.json

vite.config.js

jsconfig.json

此文件不用手动创建，当安装了和配置好vite-aliases插件后，启动项目，vite-aliases发现项目根路径下没有此文件会自动创建，以下是vite-aliases路径别名的默认配置。

导入示例

更多配置信息请到vite-aliases开源地址查阅。

vite使用vite-aliases插件配置路径别名相关推荐

vite + react + ts 配置路径别名alias
vite + react + ts 配置路径别名alias vite + react + ts 配置路径别名alias 首先下载 @types/node 包第一步配置 tsconfig.js 第二部 ...
vue-cli 项目配置路径别名
vue-cli 项目配置路径别名 1.vue-cli 2.x 配置方式在vue-cli 2.x项目中,进入build文件夹,找到webpack.base.conf.js,编辑文件 ,并找到resol ...
Vite ( Vue + TS ) 项目配置 @ 路径别名
1. 下载 @types/node 包 path 模块是 node.js 的内置模块,而 node.js 默认不支持 ts 文件的,所以需要安装 @type/node 依赖包 npm install ...
vscode 配置路径别名 @
为了保证多个项目复用代码,我喜欢把路径别名设置为@,下面介绍vscode中的配置方法. 1.安装插件Path Intellisense 2.配置 "path-intellisense.map ...
js webpack 配置路径_vue使用webpack配置路径别名
原始的文件引用方式的缺点要拼写一个巨长无比的字符串,而且每引用一次都要拼写一次. 如果这个文件位置变了,我就要把所有引用它的文件都修改一次. 下面介绍一种很优雅的方式,使用webpack的resolv ...
Taro+Vue3 - 配置@路径别名
项目中最好不要使用相对路径,因为不灵活,不方便移植,路径容易写错,可读性太差,如: import A from '../../../components/A.vue' 为了让文件路径更灵活,我们可以对 ...
react+vite+ts关于路径别名的配置
1.配置路径别名第一步:找到vite.config.ts文件第二步:引入path 第三步:写入下图红框代码备注:本项目使用的是TS,因此需要下载安装关于node这个库的ts的声明配置 npm i ...
vue3+ts+vite 路径别名配置
找vite.config.js.ts文件,进行配置.路径别名如果是单个的话,alias后面写对象,多个的话写数组,里面再放对象. import { defineConfig } from 'vite' ...
vue3 + vite + ts 设置 @ 路径别名
由于 vite 创建项目后,tsconfig.json 已配置好对应别名,因此只需单独配置 vite.config.ts 即可. 目前 tsconfig.json 中应已有如下代码 "pat ...

vite使用vite-aliases插件配置路径别名

介绍

安装