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

vite分目录打包以及去掉默认的.gz 文件

1.vite打包情况介绍:

1.1vite在不进行任何配置的情况下,会将除开public的所有引用到资源打包编译添加哈希值至assets文件夹中(非引用文件以及行内样式图片未被打包编译资源会被treeSharp直接忽略不打包),
 在这里插入图片描述
 在这里插入图片描述

1.2webpack与vite打包区别:
1.2.1vite会将所有JS、CSS等文件都统一存放在assets中,不同于webpack会将会自动生成js、css、img文件夹进行分开存放。

1.2.2vite只会对public文件夹进行不打包处理,public文件夹内所有文件会移至dist中,webpack会将public和static文件进行不打包处理,存放至dist中

2.需求:vite根据不同的资源打包时分开文件夹存放

2.1在vite.config.js中配置vite打包参数(不对public文件夹资源进行任何操作)

build: {outDir: 'dist',// assetsDir: 'public', // 静态资源目录rollupOptions: {output: {chunkFileNames: 'public/js/[name]-[hash].js',entryFileNames: 'public/js/[name]-[hash].js',assetFileNames: (assetInfo) => {if (/\.(png|svg|jpg|jpeg|gif|ttf)$/.test(assetInfo.name)) { // 匹配资源文件后缀return `public/img/[name]-[hash].[ext]`;  // 创建media文件夹存放匹配的资源文件,name为该文件的原名,hash为哈希值,ext为文件后缀名,以[name].[hash][ext]命名规则}return `public/css/[name]-[hash].[ext]`; // 不匹配的资源文件存放至assets,以[name]-[hash].[ext]命名规则,注意两处的命名规则不同},}}},`在这里插入代码片`
export default {// ...其他配置build: {rollupOptions: {output: {assetFileNames: (assetInfo) => {if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)$/.test(assetInfo.name)) { // 匹配资源文件后缀return `media/[name].[hash][ext]`;  // 创建media文件夹存放匹配的资源文件,name为该文件的原名,hash为哈希值,ext为文件后缀名,以[name].[hash][ext]命名规则}return `assets/[name]-[hash].[ext]`; // 不匹配的资源文件存放至assets,以[name]-[hash].[ext]命名规则,注意两处的命名规则不同},},},},// ...其他配置
};

复制代码
 2.2 打包后资源生成命名规则不同的区别:
2.2.1图片、JS等资源文件可通过media/[name].[hash][ext]命名规则获取资源
 2.2.1css文件不可使用上述规则,必须使用assets默认的命名规则,assets/[name]-[hash].[ext],否则无法获取该文件

在这里插入图片描述
在这里插入图片描述

相关文章:

vite分目录打包以及去掉默认的.gz 文件

1.vite打包情况介绍: 1.1vite在不进行任何配置的情况下,会将除开public的所有引用到资源打包编译添加哈希值至assets文件夹中(非引用文件以及行内样式图片未被打包编译资源会被treeSharp直接忽略不打包),     1.2w…...

Tensorflow 2.0 cnn训练cifar10 准确率只有0.1 [已解决]

cifar10 准确率只有0.1 问题描述踩坑解决办法 问题描述 如果你看的是北京大学曹健老师的tensorflow2.0,你在class5的部分可能会遇见这个问题 import matplotlib.pyplot as plt import tensorflow as tf from tensorflow.keras.layers import Dense, Dropout,MaxPooling2D,Fla…...

828华为云征文 | 在华为云上通过Docker容器部署Elasticsearch并进行性能评测

目录 前言 1. 华为云X实例介绍及优势 1.1 柔性算力 1.2 vCPU和内存的灵活配比 1.3 成本效益与性能 2. 安装并运行 Docker 2.1 修改仓库配置文件 2.2 安装 Docker 2.3 启动 Docker 3. 使用Docker部署Elasticsearch 3.1 拉取Elasticsearch镜像 3.2 启动Elasticsearch…...

生态位模型降重创新专题系列【2025

本内容旨在丰富最大熵模型的分析内容,并针对目前文章存在的问题:(1)分析内容单一,重复度高和查重率高,(2)建模流程过于简单,结果可信度评估方法过于单一等;推…...

LeetCode234. 回文链表(2024秋季每日一题 26)

给你一个单链表的头节点 head ,请你判断该链表是否为回文链表。如果是,返回 true ;否则,返回 false 。 示例 1: 输入:head [1,2,2,1] 输出:true 示例 2: 输入:hea…...

项目(石头剪刀布游戏双循环)

while (true) { #region 猜拳游戏主题逻辑 // 定义猜拳次数 int count 3; //定义用户赢得次数 int winCount 0;// 初始值为零表示用户一次没饿赢 int sysCou…...

Linux 进程3

进程地址空间 CPU读取数据都需要地址,在计算机中所有东西都是一种数据,包括我们的进程。 这是一个进程空间示意图,操作系统通过task_struct结构体链表来管理每一个进程,结构体里面有一个指针指向操作系统为进程开辟的一段空间&am…...

R语言机器学习遥感数据处理与模型空间预测技术及实际项目案例分析

随机森林作为一种集成学习方法,在处理复杂数据分析任务中特别是遥感数据分析中表现出色。通过构建大量的决策树并引入随机性,随机森林在降低模型方差和过拟合风险方面具有显著优势。在训练过程中,使用Bootstrap抽样生成不同的训练集&#xff…...

shell linux cut 切割字符串

shell linux 切割字符串 在Shell脚本中,可以使用内置的cut命令来切割字符串。cut命令主要有三个选项 -c、-f和-d,分别表示按字符、按字段和指定分隔符来切割字符串。 按字符切割: echo "Hello World" | cut -c 1-5 # 输出&#…...

golang学习笔记31——golang 怎么实现枚举

推荐学习文档 golang应用级os框架,欢迎stargolang应用级os框架使用案例,欢迎star案例:基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识,这里有免费的golang学习笔…...

fastadmin本地安装插件提示”请从官网渠道下载插件压缩包(code:2)(code:1)“

这个问题主要是在fastadmin中为了保证安全性,不让你进行本地的一个安装(离线安装) 解决办法就是去把相应的代码注释掉,把相应的权限开启。 具体步骤 1.在后台的application\config.php文件下; 将这个unknownsources的…...

STM32基础学习笔记-Timer定时器面试基础题5

第五章、TIMER 常见问题 1、基本概念:什么是定时器 ?作用 ?分类 ? 2、时基单元 ?组成 ?计数模式 ?溢出条件 ? 溢出时间计算 ? 3、systick原理 ?代码讲解 &…...

CSS06-元素显示模式、单行文字垂直居中

一、什么是元素显示模式 1-1、块级元素 1-2、行内元素 1-3、行内块元素 1-4、小结 二、元素显示模式转换 三、单行文字垂直居中 CSS 没有给我们提供文字垂直居中的代码,这里我们可以使用一个小技巧来实现。 解决方案: 让文字的行高等于盒子的高度,就可…...

【车联网安全】车端网络攻击及检测的框架/模型

参考标准: 《汽车数据安全管理若干规定(试行)》ISO/SAE 21434《道路车辆 网络安全工程》威胁分析和风险评估(TARA)ISO/DIS 24089R155法规的国标转换:《汽车整车信息安全技术要求》(UN R155&…...

58.【C语言】内存函数(memcpy函数)

目录 1.memcpy *简单使用 翻译: *模拟实现 注意事项: *例题 1.memcpy *简单使用 memcpy:memory copy cplusplus的介绍 点我跳转 翻译: 函数 memcpy void * memcpy ( void * destination, const void * source, size_t num ); 复制内存块 直接从source指向的位置复制num…...

rust一些通用编程的概念

rust一些通用编程的概念 官网文档数据类型 - Rust 程序设计语言 中文版 (rustwiki.org) 变量,数据类型,条件判断,循环 变量 rust中变量的可变性是值得注意的 例如: fn main(){let number 1;number 2;println!("the number is {}&quo…...

SpringBoot基础知识

谈一谈你对SpringBoot的理解,它有哪些特性(优点)? SpringBoot用来快速开发Spring应用的一个脚手架,其目的是用来简化新Spring应用的初始搭建以及开发过程。 优点: 简化配置:提供了很多内置的…...

ubuntu配置libtorch CPU版本

配置环境:Ubuntu 20.04Date:2024 / 08 1、下载最新版本的libtorch wget https://download.pytorch.org/libtorch/nightly/cpu/libtorch-shared-with-deps-latest.zip unzip libtorch-shared-with-deps-latest.zip2、创建一个C工程文件夹,目…...

Docker MySql 数据备份、恢复

docker-compose.yaml实例 version: 3.8 services:db:image: mysql:9.0.1environment:MYSQL_ROOT_PASSWORD: 123456MYSQL_DATABASE: dataMYSQL_USER: dataMYSQL_PASSWORD: 123456MYSQL_ROOT_HOST: % 1、备份 docker exec -it <容器名称> /usr/bin/mysqldump -u root -p12…...

django项目添加测试数据的三种方式

文章目录 自定义终端命令Faker添加模拟数据基于终端脚本来完成数据的添加编写python脚本编写shell脚本执行脚本需要权限使用shell命令来完成测试数据的添加 添加测试数据在工作中一共有三种方式&#xff1a; 可以根据django的manage.py指令进行[自定义终端命令]可以采用第三方…...

Node js 后端服务如何优雅集成 Taotoken 提供的多模型能力

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Node.js 后端服务如何优雅集成 Taotoken 提供的多模型能力 应用场景类&#xff0c;描述一个 Node.js 后端服务需要动态选择不同大模…...

NoFences:Windows桌面分区终极免费解决方案

NoFences&#xff1a;Windows桌面分区终极免费解决方案 【免费下载链接】NoFences &#x1f6a7; Open Source Stardock Fences alternative 项目地址: https://gitcode.com/gh_mirrors/no/NoFences 在Windows系统中&#xff0c;桌面图标管理一直是用户面临的常见挑战。…...

2026 及下一阶段 工业 AI 与企业级 Agent 布局

JBoltAI 作为面向企业 Java 技术团队的 AI 应用开发框架&#xff0c;围绕 工业 AI 与企业级 Agent 领域的向量空间应用&#xff0c;明确了 2026 年及下一阶段的核心布局方向&#xff0c;聚焦产业实际需求推进技术落地。工业场景的 AI 落地&#xff0c;核心难点并非技术本身&…...

ROS2 Galactic下源码编译TEB局部规划器:从依赖安装到成功运行Navigation2的保姆级避坑记录

ROS2 Galactic源码编译TEB局部规划器全流程实战指南 在机器人导航领域&#xff0c;TEB&#xff08;Timed Elastic Band&#xff09;局部规划器因其优秀的动态避障能力而备受青睐。然而当我们将目光转向ROS2 Galactic时&#xff0c;会发现官方仓库并未提供预编译的TEB功能包&…...

用C++和Eigen库手把手实现UR3机械臂逆解(附完整代码与避坑指南)

从理论到实践&#xff1a;基于Eigen库的UR3机械臂逆运动学完整实现指南 在工业自动化和机器人研究领域&#xff0c;六轴协作机械臂因其灵活性和广泛的应用场景而备受关注。UR3作为Universal Robots旗下的紧凑型协作机械臂&#xff0c;凭借其轻量化设计和用户友好特性&#xff0…...

Apex Legends压枪宏终极指南:轻松掌握自动武器检测与后坐力补偿技术

Apex Legends压枪宏终极指南&#xff1a;轻松掌握自动武器检测与后坐力补偿技术 【免费下载链接】Apex-NoRecoil-2021 Scripts to reduce recoil for Apex Legends. (auto weapon detection, support multiple resolutions) 项目地址: https://gitcode.com/gh_mirrors/ap/Ape…...

ZYNQ AXI DMA Scatter/Gather模式实战:从PL到PS的高效数据流构建与FreeRTOS任务调度

1. 理解AXI DMA Scatter/Gather模式的核心价值 在ZYNQ平台上构建高效数据流系统时&#xff0c;AXI DMA的Scatter/Gather模式&#xff08;简称SG模式&#xff09;绝对是硬件加速的利器。我第一次接触这个功能时&#xff0c;发现它完美解决了传统DMA传输中的两大痛点&#xff1a;…...

终极指南:如何用NoFences桌面分区工具提升3倍工作效率

终极指南&#xff1a;如何用NoFences桌面分区工具提升3倍工作效率 【免费下载链接】NoFences &#x1f6a7; Open Source Stardock Fences alternative 项目地址: https://gitcode.com/gh_mirrors/no/NoFences 你是否厌倦了Windows桌面上杂乱无章的图标&#xff1f;每天…...

为什么你的ElevenLabs广告完播率低于行业均值37%?——专业声学工程师用频谱图还原真相

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs广告配音的核心声学失效诊断 当ElevenLabs生成的广告语音出现“机械感过强”“情感断层”或“语调塌陷”等现象时&#xff0c;问题往往并非源于模型随机性&#xff0c;而是底层声学特征在合…...

从流水线卡顿到丝滑训练:Deepspeed Pipeline Parallelism实战调优避坑指南

从流水线卡顿到丝滑训练&#xff1a;Deepspeed Pipeline Parallelism实战调优避坑指南 当你的Transformer模型参数量突破百亿级别&#xff0c;传统数据并行开始显露出明显的局限性——GPU内存不足、通信开销激增、计算资源利用率低下。这时&#xff0c;流水线并行&#xff08;P…...