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

为什么要配置别名

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/196695.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

量化交易:公司基本面的量化

公司的基本面因素一直具备滞后性&#xff0c;令基本面的量化出现巨大困难。而从上市公司的基本面因素来看&#xff0c;一般只有每个季度的公布期才会有财务指标的更新&#xff0c;而这种财务指标的滞后性对股票表现是否有影响呢&#xff1f;如何去规避基本面滞后产生的风险呢&a…

【草料】uni-app ts vue 小程序 如何如何通过草料生成对应的模块化二维码

一、查看uni-app项目 1、找到路径 可以看到项目从 src-race-pages-group 这个使我们目标的查询页面 下面我们将这个路径copy到草料内 2、找到进入页面入参 一般我们都会选择 onload() 函数下的入参 这里我们参数的是 id 二、草料 建议看完这里的教程文档 十分清晰&#xff01…

彩色年终工作总结汇报PPT模板下载

这是一套彩色年终工作总结汇报PPT模板&#xff0c;共27页&#xff1b; PPT模板封面&#xff0c;使用了红黄蓝色块、网格背景。中间填写年终工作总结汇报PPT标题。界面为简约商务风格。 PowerPoint模板内容页&#xff0c;由25张彩色动态幻灯片图表&#xff0c;搭配PPT文字排版…

二十一、数组(1)

本章概要 数组特性 用于显示数组的实用程序 一等对象返回数组 简单来看&#xff0c;数组需要你去创建和初始化&#xff0c;你可以通过下标对数组元素进行访问&#xff0c;数组的大小不会改变。大多数时候你只需要知道这些&#xff0c;但有时候你必须在数组上进行更复杂的操作…

Nuxt3框架全局引用外部JS/CSS文件的相关配置方法

全局引入外部文件方法&#xff1a; 找到根目录下的nuxt.config.ts配置文件&#xff1b;然后如上图所示&#xff0c;在defineNuxtConfig配置对象下app选项节点下&#xff0c;head对象中即可配置全局需要的JS或CSS文件&#xff1b; // https://nuxt.com/docs/api/configuration/…

Pytorch torch.norm函数详解用法

torch.norm参数定义 torch版本1.6 def norm(input, p"fro", dimNone, keepdimFalse, outNone, dtypeNone)input input (Tensor): the input tensor 输入为tensorp p (int, float, inf, -inf, fro, nuc, optional): the order of norm. Default: froThe following …

【JVM】内存区域划分、类加载机制(双亲委派模型图解)、垃圾回收(可达性分析、分代回收)

一、JVM简介 JVM (Java虚拟机) 是执行Java字节码的虚拟机。它是Java平台的核心&#xff0c;并且为Java代码提供了跨平台的能力。JVM 是一种虚拟的计算机&#xff0c;在其上运行的程序是Java字节码&#xff0c;它提供了Java代码在不同操作系统和硬件平台上执行的能力。JVM 将Ja…

C++之map容器

C之map容器 map构造和赋值 #include<iostream> #include<string> using namespace std; #include<map>void printMap(map<int,int>&m) {for (map<int,int>::iterator it m.begin();it ! m.end();it){//cout <<"key is: "&l…

vue --version无法显示,只弹出vs窗口

参考连接&#xff1a; nodejs环境配置&#xff08;解压包&#xff09;安装教程_nodejs解压版安装及环境配置_tubond的博客-CSDN博客 原因&#xff1a;环境没搞好&#xff0c;没有设置全局文件夹&#xff0c;node默认放在C盘了&#xff0c;C盘有权限。因为npm -i vue/cli创建…

[acwing周赛复盘] 第 94 场周赛20230311

[acwing周赛复盘] 第 94 场周赛20231118 总结5295. 三元组1. 题目描述2. 思路分析3. 代码实现 5296. 边的定向1. 题目描述2. 思路分析3. 代码实现 六、参考链接 总结 好久没做acw了&#xff0c;挺难的。T1 模拟T2 前缀和以及优化。T3 贪心 5295. 三元组 链接: 5295. 三元组…

Redis面经

Redis使用场景 1、缓存&#xff1a; 缓存三兄弟(穿透、击穿、雪崩) 、双写一致、持久化、数据过期策略&#xff0c;数据淘汰策略 2、分布式锁 setnx、redisson 3、消息队列 4、延迟队列 何种数据类型&#xff08;list、zset&#xff09; 缓存三兄弟 缓存穿透 缓存穿透…

信创之路数据库人大金仓篇

概要 信创大势所趋&#xff0c;吾等上下求索 参考文档 Linux&#xff1a;人大金仓数据库-KingBaseES V8与 php7的连接配置 laravel9适配人大金仓&#xff08;kingbase&#xff09;数据库 thinkphp6适配人大金仓&#xff08;Kingbase&#xff09;数据库 数据库选型 目前比较…

kafka入门(一):kafka消息消费

安装kafka&#xff0c;创建 topic&#xff1a; Windows安装kafka, 详情见&#xff1a;https://blog.csdn.net/sinat_32502451/article/details/133067851 Linux 安装kafka&#xff0c;详情见&#xff1a;https://blog.csdn.net/sinat_32502451/article/details/133080353 添…

[Docker]六.Docker自动部署nodejs以及golang项目

一.自动部署nodejs 1.创建node项目相关文件 app.js代码如下: var express require(express);var appexpress();app.get(/,function(req,res){res.send(首页update); }) app.get(/news,function(req,res){res.send(首页); })//docker做端口映射的时候不要指定ip app.listen(30…

智能指针面试题

智能指针被问到的概率还是很大的&#xff0c;特别是Shared_ptr&#xff0c;最好会手撕&#xff0c;亲身经历&#xff01; 基本概念 1. RAll RAII&#xff08;Resource Acquisition Is Initialization&#xff09;是一种利用对象生命周期来控制程序资源&#xff08;如内存、文…

解决更换NodeJs版本后npm -v返回空白

一、问题描述 win11电脑上输入cmd进入控制台&#xff0c;输入 node --version 有正常返回安装的nodejs的版本号 再输入 npm -v 返回空白。正常情况应该是要返回版本号。 二、问题背景 最近准备学习vue&#xff0c;在不久前已经安装了NodeJs和python。运行了好几个开源项…

Git配置代理:fatal: unable to access*** github Failure when receiving data from

~吐槽一下 github自从被微软收购以后&#xff0c;大多数情况没点科技上网都进不去了&#xff0c;还是怀念以前随时访问的时光。 我一直都是开着系统代理的&#xff0c;但是今天拉一个项目发现拉不下来了&#xff0c;报错&#xff1a; fatal: unable to access https://githu…

Maven介绍及仓库配置

目录 一.Maven 1.介绍 坐标 仓库 1&#xff09;中央仓库 2&#xff09;本地仓库 3&#xff09;私服 配置国内源 配置过程 二.Maven功能 2.项目构建 3.依赖管理 Maven Help插件 安装 ​使用 一.Maven 1.介绍 坐标 唯一的&#xff0c;通过以下代码的三个键值对确…

搜索引擎ElasticSearch分布式搜索和分析引擎学习,SpringBoot整合ES个人心得

ElasticSearch Elasticsearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口。Elasticsearch是用Java语言开发的&#xff0c;并作为Apache许可条款下的开放源码发布&#xff0c;是一种流行的企业级搜索引擎。Elas…

tomcat8.5处理get请求时,控制台输出中文乱码问题的解决

问题描述 控制台输出中文乱码 版本信息 我使用的是tomcat8.5 问题解决 配置web.xml 注&#xff1a;SpringMVC中处理编码的过滤器一定要配置到其他过滤器之前&#xff0c;否则无效 <!--配置springMVC的编码过滤器--> <filter><filter-name>CharacterEn…