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

news2024/11/23 21:24:14

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],否则无法获取该文件

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

阿里云函数计算 x NVIDIA 加速企业 AI 应用落地

作者:付宇轩 前言 阿里云函数计算(Function Compute, FC)是一种无服务器(Serverless)计算服务,允许用户在无需管理底层基础设施的情况下,直接运行代码。与传统的计算架构相比,函数…

极星Polestar EDI 项目案例

近期国内汽车行业供应商J公司收到了极星Polestar的邀请,需要通过EDI与其国内工厂传输业务数据。本案例将为大家介绍对接过程以及实施方案。 梳理需求文档 极星Polestar的EDI需求与Volvo一样,传输协议选择 OFTP,报文标准为EDIFACT&#xff0…

Swing模拟银行柜台系统

> 这是一个基于JavaSwing实现的模拟银行柜台系统。 > 具有管理员、柜员、客户三种登录角色。 > 支持开户、注册、存取款、转账、汇款、账单查询等功能。 > 本项目适合JAVA初学者作为入门学习项目。 一、部分界面演示 二、基础依赖 技术/框架版本描述Java11编…

Vue前端浏览器指纹获取:数字世界的身份密码

程序员必备宝典https://tmxkj.top/#/一个开源的JavaScript库,它通过收集用户浏览器的多种属性(如屏幕分辨率、浏览器插件、字体、Canvas和WebGL等)来生成一个独特的浏览器指纹,用于识别和追踪用户。 #Github地址 GitHub - finger…

Uniapp时间戳转时间显示/时间格式

使用uview2 time 时间格式 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 <text class"cell-tit clamp1">{{item.create_time}} --- {{ $u.timeFormat(item.create_time, yyyy-mm-dd hh:MM:ss)}} </text>

apply、call和bind的作用和区别

apply与call 首先介绍一下apply与call&#xff0c;因为这两个方法的功能和使用方式都差不多&#xff0c;只是传参的方式不同。call和apply的作用都是改变函数运行时的上下文&#xff08;context&#xff09; 语法 fun.call(thisArg, arg1, arg2, ...)fun.apply(thisArg, arg…

类的难疑点

一、知识点 1、类的属性和对象属性&#xff08;实例属性&#xff09; shuxing"123" self.shuxing"123" 2、类的对象 self.loginMyclass() loginMyclass() 3、访问类属性和方法的操作 通过“类名.属性”访问&#xff1a;Myclass.shuxing 通…

详解常见排序

目录 ​编辑 插入排序 希尔排序&#xff08;缩小增量排序&#xff09; 选择排序 冒泡排序 堆排序 快速排序 hoare版 挖坑法 前后指针法 非递归版 归并排序 递归版 非递归版 计数排序 声明&#xff1a;以下排序代码由Java实现&#xff01;&#xff01;&#xff01…

【研赛D题成品论文】24华为杯数学建模研赛D题成品论文(第一问)+可运行代码丨免费分享

2024华为杯研究生数学建模竞赛D题精品成品论文已出&#xff01; D题 大数据驱动的地理综合问题 一、问题分析 问题一&#xff1a;目标&#xff1a;利用1990-2020年的数据&#xff0c;针对降水量和土地利用的时空演化特征进行描述。数据&#xff1a;两个核心变量&#xff0c;一…

电商效果图渲染神器:轻松高效出图

在这个电商行业飞速发展的今天&#xff0c;离不开商品图的效果。而电商效果图同样离不开渲染&#xff0c;而大量的渲染需求有需要大量的机器&#xff0c;还要追求更快的渲染速度和更稳定的性能。毕竟&#xff0c;谁不想快点完成项目又省心呢&#xff1f; 而云渲染服务是个很好…

C++之STL—deque容器

双端数组 区别于 vector (单端数组)&#xff0c; 构造函数 注意&#xff1a;读取数据时&#xff0c;const修饰保证函数内只能读取&#xff0c;不能修改数据 void print(const deque<int>& deq) {for (deque<int>::const iterator it deq.begin(); it ! deq.e…

使用 Nuxt Kit 的构建器 API 来扩展配置

title: 使用 Nuxt Kit 的构建器 API 来扩展配置 date: 2024/9/24 updated: 2024/9/24 author: cmdragon excerpt: 摘要:本文详细介绍了如何使用 Nuxt Kit 的构建器 API 来扩展和定制 Nuxt 3 项目的 webpack 和 Vite 构建配置,包括扩展Webpack和Vite配置、添加自定义插件、…

正向科技|格雷母线定位系统的设备接线安装示范

格雷母线安装规范又来了&#xff0c;这次是设备接线步骤 格雷母线是格雷母线定位系统的核心部件&#xff0c;沿着移动机车轨道方向上铺设&#xff0c;格雷母线以相互靠近的扁平状电缆与天线箱电磁偶合来进行信号传递&#xff0c;从而检测得到天线箱在格雷母线长度方向上的位置。…

OpenLayers 开源的Web GIS引擎 - 添加地图控件地图控件

中心点按钮、地图放大缩小滑块、全图和比例尺控件 直接上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.…

python爬虫案例——腾讯网新闻标题(异步加载网站数据抓取,post请求)(6)

文章目录 前言1、任务目标2、抓取流程2.1 分析网页2.2 编写代码2.3 思路分析前言 本篇案例主要讲解异步加载网站如何分析网页接口,以及如何观察post请求URL的参数,网站数据并不难抓取,主要是将要抓取的数据接口分析清楚,才能根据需求编写想要的代码。 1、任务目标 目标网…

基于深度学习的树叶识别系统的设计与实现(pyqt5 python3.9 yolov8 10000张数据集)

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

vector的模拟实现以及oj题

前言 上篇博客介绍了voctor的大部分的重要接口&#xff0c;本篇博客将模拟实现部分接口的效果。 vector的模拟实现 vector的模拟实现分为两个文件进行实现&#xff1a;vector.h、test.cpp vector.h 该部分为文件的主要部分&#xff0c;分别实现了vector的以下功能&#xf…

VSCode扩展连接虚拟机MySQL数据库

在虚拟机安装MySQL vscode通过ssh远程登录Ubuntu 在vscode终端运行以下命令。 sudo apt-get install mysql-server-5.7 用以下命令确认MySQL是否安装完成。 sudo mysql MySQL安装成功。 在VSCode安装SQL扩展 扩展名&#xff1a;MySQL Shell for VS Code。 安装完成后&am…

oracle各种版本在各种系统上安装配置需求快速参考

Oracle Database (RDBMS) on Unix AIX,HP-UX,Linux,Solaris and MS Windows Operating Systems Installation and Configuration Requirements Quick Reference (12.1/12.2/18c/19c) (Doc ID 1587357.1)

(14)关于docker如何通过防火墙做策略限制

关于docker如何通过防火墙做策略限制 1、iptables相关问题 在Iptables防火墙中包含四种常见的表&#xff0c;分别是filter、nat、mangle、raw。 filter&#xff1a;负责过滤数据包。 filter表可以管理INPUT、OUTPUT、FORWARD链。 nat&#xff1a;用于网络地址转换。 nat表…