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

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

news 2025/12/16 17:04:58

为什么要配置别名

别名的配置，主要作用是为了缩短代码中的导入路径。例如有如下的项目目录：
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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子&#xff08…...

编程新知 2025/12/16 5:54:19

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...

编程新知 2025/12/16 3:57:40

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战：腾讯云IM群组成员管理（增删改查） 一、前言在社交类App开发中，群组成员管理是核心功能之一。本文将基于UniApp框架，结合腾讯云IM SDK，详细讲解如何实现群组成员的增删改查全流程。权限校验…...

编程新知 2025/9/22 20:29:32

idea大量爆红问题解决

问题描述在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决就是如上所展示的问题，但是程序依然可以启动。问题解决…...

编程新知 2025/12/16 13:18:10

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

＜6＞-MySQL表的增删查改

目录一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件三，update（更新表） 四，delete（删除表&#xf…...

编程新知 2025/12/11 18:28:17

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 （一）实时滤波与参数调整基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。平滑处理&…...

编程新知 2025/11/19 22:56:53

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/12/15 13:14:25

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/12/13 14:56:36

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

为什么要配置别名

配置别名的知识储备

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

项目目录

main.js 文件内容

index.html

package.json 中的脚本

运行效果

再来看看配置别名的效果

项目目录

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

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

vite.dev.config.js

vite.prod.config.js

vite.config.js

main.js 文件内容

index.html

package.json 中的脚本

运行效果

相关文章：