当前位置：首页 > news >正文

Vite - 配置 - 文件路径别名的配置

news 2026/3/31 8:54:20

为什么要配置别名

别名的配置，主要作用是为了缩短代码中的导入路径。例如有如下的项目目录：
project-name| -- src| -- a| --b| --c| --d| --e| -- abc.png| -- index.html| -- main.js如果想在 main.js 文件中使用 abc.png ,则使用的路径是 ：
import abcPng from './src/a/b/c/d/e/abc.png'
路径非常的长，因为它的目录层级多。问 ： 是否有一种方式可以缩短以上的引入路径呢？
答 ： 有！这种方式就是路径别名。

配置别名的知识储备

因为别名的配置主要是对资源目录的操作，在node中，path 模块会很有帮助，通常会配合使用。
path 模块 ： node 中专门用来处理文件路径的模块；
path.resolve() : path 模块中进行文件路径拼接的方法；
__dirname : node 中的一个变量，哪个文件中使用了它，他就代表了该文件所在的目录（绝对路径）。

先来看看不使用配置别名的常规操作

项目目录

study-vite| -- src｜ -- assets｜ -- aaa.png| -- index.html| -- main.js| -- package.json| -- vite.config.js. # vite 的配置文件,此时无需做任何的配置

main.js 文件内容

// 1、直接使用相对路径引入图片
import aaPic from './src/assets/aaa.png'// 通过js 的方式创建元素
let imgA1 = document.createElement("img")
imgA1.src = aaPic
imgA1.width=400
document.body.appendChild(imgA1)

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>vite 中引入图片 - 相对路径的方式<br><!-- 引入 main.js 模块 --><script type="module" src="./main.js" ></script></body>
</html>

package.json 中的脚本

  "scripts": {"dev": "vite --mode development",},

运行效果

# 运行的命令
$ npm run dev

可以正常访问到该图片
在这里插入图片描述

再来看看配置别名的效果

本案例中，为了区分正式环境和开发环境，使用到了环境配置文件的内容。
如果对环境配置文件不熟悉的小伙伴，可以参考下面的文章
Vite - 配置 - 不同的环境执行不同的配置文件
文章地址： https://blog.csdn.net/qq_39505245/article/details/134332060

项目目录

study-vite| -- environment # 环境配置文件目录| -- vite.base.config.js # 基础公用配置| -- vite.dev.config.js # 开发环境配置| -- vite.prod.config.js # 生产环境配置| -- src｜ -- assets｜ -- aaa.png| -- index.html| -- main.js| -- package.json| -- vite.config.js. # vite 的主配置文件

配置文件的内容 - 主要看 vite.base.config.js

vite.base.config.js （核心、关键）

/*** 基础环境配置，公用的配置*/import { defineConfig } from "vite"// 引入path模块
import path from "path"// 打印一下__dirname（此处是为了展示变量的值，助于下面的理解）
console.log('vite.base.config.js - __dirname : ',__dirname)
// 打印一下 path.resolve(__dirname,"../src/assets") （此处是为了展示变量的值，助于下面的理解）
console.log('vite.base.config.js - path.resolve() : ',path.resolve(__dirname,"../src/assets"))export default defineConfig({resolve:{alias:{/*** 解释 ： * __dirname : 当前文件所在的目录的绝对路径* "../src/assets" : 表示相对于 __dirname ,要进行拼接的目录* path.resolve() : 将上面两个目录拼接起来* * "@assets" : 给拼接的目录起一个别名，在项目中可以通过别名的方式进行资源的引入*/"@assets" : path.resolve(__dirname,"../src/assets")}}})

vite.dev.config.js

/*** 开发环境的配置，目前来讲还没有配置任何的内容*/import { defineConfig } from "vite"export default defineConfig({})

vite.prod.config.js

/*** 生产环境的配置，目前来讲还没有配置任何的内容*/import { defineConfig } from "vite"export default defineConfig({})

vite.config.js

非常的简单，主要就是根据启动时的命令，使用不同的配置参数；
在本案例中，使用的启动命令是 npm run dev，走的是开发环境的配置
因此，项目会加载【vite.base.config.js】【vite.dev.config.js】两个配置文件


import { defineConfig } from "vite"// 引入三个环境配置文件
import ViteBaseConfig from "./environment/vite.base.config"
import ViteProdConfig from "./environment/vite.prod.config"
import ViteDevConfig from "./environment/vite.dev.config"// 策略模式做一个动态的配置
const envResolver = {"build":()=>{console.log("生产环境")// 解构的语法return ({...ViteBaseConfig,...ViteProdConfig})},"serve":()=>{console.log("开发环境")// 另一种写法return Object.assign({},ViteBaseConfig,ViteDevConfig)}
}// 根据 参数 command 的值，使用不同的环境配置文件
export default defineConfig(({command,mode})=>{// 根据不同的环境使用不同的配置文件,注意这个地方的写法，非常的奇特return envResolver[command]()})

main.js 文件内容

// 2、使用别名的方式引入图片
// @assets 就是vite.base.config.js 中配置的别名
import aaPic from '@assets/aaa.png'let imgA1 = document.createElement("img")
imgA1.src = aaPic
imgA1.width=400
document.body.appendChild(imgA1)

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>vite 中引入图片 - 路径别名的方式<br><!-- 引入 main.js 模块 --><script type="module" src="./main.js" ></script></body>
</html>

package.json 中的脚本

  "scripts": {"dev": "vite --mode development",},

运行效果

# 执行命令
$ npm run dev因为我们在配置文件中有打印，所以在项目启动-加载配置文件的时候会有如下输出(就是我们验证 path 模块的相关内容)
vite.base.config.js - __dirname :  /xxx/xxx/study-vite/environment
vite.base.config.js - path.resolve() :  /xxx/xxx/study-vite/src/assets

在这里插入图片描述

Vite - 配置 - 文件路径别名的配置

为什么要配置别名别名的配置，主要作用是为了缩短代码中的导入路径。例如有如下的项目目录： project-name| -- src| -- a| --b| --c| --d| --e| -- abc.png| -- index.html| -- main.js如果想在 main.js 文件中使用 abc.png ,则使用的路径是 &#xff1…...

编程日记 2023/11/19 2:08:28

步骤1： [Xdebug] zend_extension“D:\phpstudy_pro\Extensions\php\php5.4.45nts\ext\php_xdebug.dll” xdebug.collect_params1 xdebug.collect_return1 xdebug.remote_enableOn xdebug.remote_hostlocalhost xdebug.remote_port9001 xdebug.remote_handlerdbgp ;…...

编程日记 2023/11/19 2:06:27

多维时序 | MATLAB实现PSO-BiGRU-Attention粒子群优化双向门控循环单元融合注意力机制的多变量时间序列预测

多维时序 | MATLAB实现PSO-BiGRU-Attention粒子群优化双向门控循环单元融合注意力机制的多变量时间序列预测目录多维时序 | MATLAB实现PSO-BiGRU-Attention粒子群优化双向门控循环单元融合注意力机制的多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料预测效果 …...

编程日记 2023/11/19 2:05:25

linux配置固定ip（两种方法）

首先刚下载的vm，刚创建的虚拟机，肯定是需要配置ip的其次以前我的每次都是设置自动ip，这样每次登录都会自动获取ip地址，并且每次的ip都不相同。 ~方法： 开机登陆后 1)Cd /etc/sysconfig/network-scripts 2)Vi ifcf…...

编程日记 2023/11/19 2:04:24

什么是缓存雪崩、击穿、穿透？

背景数据一般是存储于数据库中，数据库中的数据都是存在磁盘上的，磁盘读写的速度相较于内存或者CPU中的寄存器来说是非常慢的了。如果用户的请求都直接访问数据库的话，请求数量一上来，数据库很容易就崩溃了，所以为了…...

编程日记 2023/11/19 2:03:23

可以通过电脑远程控制安卓设备的软件

有些时候，我们需要用电脑远程控制安卓设备，比如远程维护门店设备、安卓系统的户外广告牌等等。我们来探索和比较几款允许用户通过电脑远程控制安卓设备的软件。 1、Splashtop Business Splashtop 是一种多功能远程访问解决方案，以其高性能流…...

编程日记 2023/11/19 2:02:21

HP惠普暗影精灵9笔记本电脑OMEN by HP Transcend 16英寸游戏本16-u0000原厂Windows11系统

惠普暗影9恢复出厂开箱状态，原装出厂Win11-22H2系统ISO镜像下载链接：https://pan.baidu.com/s/17ftbBHEMFSEOw22tnYvPog?pwd91p1 提取码：91p1 适用型号：16-u0006TX、16-u0007TX、16-u0008TX、16-u0009TX、16-u0017TX 原厂系…...

编程日记 2023/11/19 2:01:20

vue2+elementUI 仿照SPC开发CPK分析工具

源码地址请访问 Vue CPK分析工具页面设计源码（支持左右可拖拽和表格可编辑、复制粘贴）仿照SPC开发-CSDN博客...

编程日记 2023/11/19 2:00:19

云ES使用集群限流插件（aliyun-qos）

aliyun-qos插件是阿里云Elasticsearch团队自研的插件，能够提高集群的稳定性。该插件能够实现集群级别的读写限流，在关键时刻对指定索引降级，将流量控制在合适范围内。例如当上游业务无法进行流量控制时，尤其对于读请求业务，可根据aliyun-qos插件设置的规则，按照业务的优先…...

编程日记 2023/11/19 1:59:16

2023.11.17 hadoop之HDFS进阶

目录 HDFS的机制元数据简介元数据存储流程:namenode 生成了多个edits文件和一个fsimage文件 edits和fsimage文件 SecondaryNameNode辅助NameNode的方式: HDFS的存储原理写入数据原理: 发送写入请求,获取主节点同意,开始写入,写入完成读取数据原理:发送读取请求,获取…...

编程日记 2023/11/19 1:58:15

如何在el-tree懒加载并且包含下级的情况下进行数据回显-01

在项目中做需求，遇到一个比较棘手的问题，el-tree懒加载在包含下级的时候，需要做回显，将选中的数据再次勾选上，在处理这个需求的时候有两点是比较困难的： el-tree是懒加载的，包含下级需要一层一…...

编程日记 2023/11/19 1:57:14

系列六、JVM的内存结构【栈】

一、产生背景由于跨平台性的设计，Java的指令都是根据栈来设计的，不同平台的CPU架构不同，所以不能设计为基于寄存器的。二、概述栈也叫栈内存，主管Java程序的运行，是在线程创建时创建，线程销毁时销毁&…...

编程日记 2023/11/19 1:56:13

技巧篇：在Pycharm中配置集成Git

一、在Pycharm中配置集成Git 我们使用git需要先安装git工具，这里给出下载地址，下载后一路直接安装即可： https://git-for-windows.github.io/ 0. git中的一些常用词释义 Repository name： 仓库名称 Description(可选)：…...

编程日记 2023/11/19 1:55:11

Yolov5

Yolov5 Anchor １．Anchor是啥？ anchor字面意思是锚，是个把船固定的东东（上图），anchor在计算机视觉中有锚点或锚框，目标检测中常出现的anchor box是锚框，表示固定的参考框…...

编程日记 2023/11/19 1:54:10

36、Flink 的 Formats 之Parquet 和 Orc Format

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…...

编程日记 2023/11/19 1:53:09

Docker 笔记（一）--安装

Docker 笔记（一）–安装记录Docker 安装操作记录，便于查询。参考链接: Docker 入门到实战教程(二)安装Docker链接: docker入门(利用docker部署web应用)链接: 阿里云容器镜像服务/镜像加速器/操作文档链接: 网易镜像中心链接: 阿里云镜像…...

编程日记 2023/11/19 1:52:08

endnote20如何导入已经下载好的ris和pdf文件

查看此链接 1 文献导入 1.1 PDF导入 （1）方法一打开：菜单栏–>Import–>FIle或folder 单个导入PDF或导入一个文件夹的PDF或通过拖曳多个PDF进入空白处完成导入 1.3 导入已经整理好的文献资料已有的ris文件打开：菜单栏–…...

编程日记 2023/11/19 1:51:08

x程无忧sign逆向分析

x程无忧sign逆向分析： 详情页sign： 详情页网站： import base64 # 解码 result base64.b64decode(aHR0cHM6Ly9qb2JzLjUxam9iLmNvbS9ndWFuZ3pob3UvMTUxODU1MTYyLmh0bWw/cz1zb3Vfc291X3NvdWxiJnQ9MF8wJnJlcT0zODQ4NGQxMzc2Zjc4MDY2M2Y1MGY2Y…...

编程日记 2023/11/19 1:50:07

Rust8.1 Smart Pointers

Rust学习笔记 Rust编程语言入门教程课程笔记参考教材: The Rust Programming Language (by Steve Klabnik and Carol Nichols, with contributions from the Rust Community) Lecture 15: Smart Pointers src/main.rs use crate::List::{Cons, Nil}; use std::ops::Deref…...

编程日记 2023/11/19 1:49:05

MATLAB与Excel的数据交互

准备阶段 clear all % 添加Excel函数 try Excel=actxGetRunningServer(Excel.Application); catch Excel=actxserver(Excel.application); end % 设置Excel可见 Excel.visible=1; 插入数据 % % 激活eSheet1 % eSheet1.Activate; % 或者 % Activate(eSheet1); % % 打开…...

编程日记 2023/11/19 1:48:03

告别编码等待：LosslessCut的无损视频处理革命

告别编码等待：LosslessCut的无损视频处理革命【免费下载链接】lossless-cut The swiss army knife of lossless video/audio editing 项目地址: https://gitcode.com/gh_mirrors/lo/lossless-cut 副标题：掌握零质量损失剪辑、多轨道精细控制与批…...

编程新知 2026/3/31 8:53:51

SDMatte多风格抠图作品集：从商品白底图到艺术创意合成

SDMatte多风格抠图作品集：从商品白底图到艺术创意合成 1. 开篇：当抠图遇上AI 还记得那些年用Photoshop一点一点抠图的痛苦经历吗？边缘总是处理不干净，头发丝永远抠不完整，遇到复杂背景更是让人抓狂。现在&#xff0c…...

编程新知 2026/3/31 8:25:40

java篇26-Java匿名内部类、invoke方法、动态代理

一、匿名内部类匿名内部类一般作为方法的参数，这个方法的形参为接口，而实参为匿名内部类（可以理解为接口的对象）并且重写了接口中的方法。书写形式： new <接口名>(){ Overvide //重写方法 }例如： 定…...

编程新知 2026/3/31 5:28:13

3步打造纯净音乐体验：铜钟音乐开源播放器技术解析

3步打造纯净音乐体验：铜钟音乐开源播放器技术解析【免费下载链接】tonzhon-music 铜钟 (Tonzhon.com): 免费听歌; 没有直播, 社交, 广告, 干扰; 简洁纯粹, 资源丰富, 体验独特！(密码重置功能已回归) 项目地址: https://gitcode.com/GitHub_Trending/t…...

编程新知 2026/3/31 5:02:03