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

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

news 2026/2/4 5:01:21

为什么要配置别名

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

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

phpStorm Xdebug调试 加FireFox浏览器

步骤1&#xff1a; [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&#xff0c;刚创建的虚拟机&#xff0c;肯定是需要配置ip的 其次以前我的每次都是设置自动ip&#xff0c;这样每次登录都会自动获取ip地址&#xff0c;并且每次的ip都不相同。 ~方法&#xff1a; 开机登陆后 1)Cd /etc/sysconfig/network-scripts 2)Vi ifcf…...

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

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

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

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

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

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

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

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

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

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

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

源码地址请访问 Vue CPK分析工具页面设计源码&#xff08;支持左右可拖拽和表格可编辑、复制粘贴&#xff09;仿照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

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

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

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

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

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

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

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

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

Yolov5

Yolov5 Anchor &#xff11;&#xff0e;Anchor是啥&#xff1f; anchor字面意思是锚&#xff0c;是个把船固定的东东&#xff08;上图&#xff09;&#xff0c;anchor在计算机视觉中有锚点或锚框&#xff0c;目标检测中常出现的anchor box是锚框&#xff0c;表示固定的参考框…...

编程日记 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 笔记&#xff08;一&#xff09;–安装 记录Docker 安装操作记录&#xff0c;便于查询。 参考 链接: Docker 入门到实战教程(二)安装Docker链接: docker入门(利用docker部署web应用)链接: 阿里云容器镜像服务/镜像加速器/操作文档链接: 网易镜像中心链接: 阿里云镜像…...

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

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

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

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

x程无忧sign逆向分析

x程无忧sign逆向分析&#xff1a; 详情页sign&#xff1a; 详情页网站&#xff1a; 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

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2026/2/2 22:13:50

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2026/1/29 8:44:01

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2026/1/23 12:22:14

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54