vue3+vite 前端打包不缓存配置

最近遇到前端部署后浏览器得清缓存才能出现最新页面效果得问题
所以…按以下方式配置完打包就没啥问题了,原理很简单就是加个时间戳

/* eslint-disable no-undef */
import {defineConfig, loadEnv} from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'
const nowTime = new Date().getTime()
// https://vitejs.dev/config/
export default defineConfig(({mode, command}) => {const env = loadEnv(mode, process.cwd())const {VITE_APP_ENV} = envreturn {// 部署生产环境和开发环境下的URL。// 默认情况下,vite 会假设你的应用是被部署在一个域名的根路径上base: VITE_APP_ENV === 'production' ? '/' : '/',plugins: createVitePlugins(env, command === 'build'),resolve: {alias: {// 设置路径'~': path.resolve(__dirname, './'),// 设置别名'@': path.resolve(__dirname, './src'),UTILS: path.resolve(__dirname, './src/utils'),},// https://cn.vitejs.dev/config/#resolve-extensionsextensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],},css: {preprocessorOptions: {scss: {// additionalData: `@use "@/assets/styles/variables.module.scss" as *;`,},},postcss: {plugins: [{postcssPlugin: 'internal:charset-removal',AtRule: {charset: (atRule) => {if (atRule.name === 'charset') {atRule.remove()}},},},],},},build: {rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return 'vendor'}// if (id.includes('components')) {//   return 'components'// }return null // 不需要特殊处理的模块},chunkFileNames: ({name}) => {if (name === 'vendor') {return `assets/js/[name]-[hash].js` // 第三方库不添加时间戳} else {return `assets/js/[name]-[hash]-${nowTime}.js` // 自定义文件名,使用时间戳保证唯一性}},entryFileNames: ({name}) => {if (name === 'vendor') {return `assets/js/[name]-[hash].js` // 第三方库不添加时间戳} else {return `assets/js/[name]-[hash]-${nowTime}.js` // 自定义文件名,使用时间戳保证唯一性}},assetFileNames: `assets/[ext]/[name]-[hash].[ext]`, // 资源文件添加时间戳},},},}
})
重点是这个

在这里插入图片描述

在这里插入图片描述

打包后的效果截图
在这里插入图片描述

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

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

相关文章

基于Qt/C++全局键盘和鼠标事件监控工具

项目介绍: 该项目实现了一个基于 Qt 框架的全局键盘和鼠标事件监控工具,主要功能包括: 实时监控全局键盘事件:捕获并显示所有键盘按键,并将按键的虚拟键码转为键名显示。实时监控全局鼠标事件:捕获并显示…

华为数通HCIA系列第5次考试-【2024-46周-周一】

文章目录 1、子网掩码有什么作用,和IP地址是什么关系,利用子网掩码可以获取哪些信息?2、已知一个IP地址是192.168.1.1,子网掩码是255.255.255.0,求其网络地址3、已知某主机的IP地址是192.168.100.200,子网掩…

arkUI:遍历数据数组动态渲染(forEach)

arkUI:遍历数据数组动态渲染(forEach) 1 主要内容说明2 相关内容2.1 ForEach 的基本语法2.2 简单遍历数组2.2 多维数组遍历2.4 使用唯一键2.5 源码1的相关说明2.5.1 源码1 (遍历数据数组动态渲染)2.5.2 源码1运行效果 …

Ue5 umg学习(一)

学习视频资料链接 2、UI编辑界面_哔哩哔哩_bilibili 打开ue5虚幻引擎 创建新的文件夹UI,在这个文件夹里写东西 点击停靠在布局中 双击点进UI文件夹 右键用户界面,选择控件蓝图 创建控件蓝图,重命名,在名称后面加一个_BP1代表是…

PYNQ 框架 - 中断(INTR)驱动

目录 1. 简介 2. 分析 2.1 Block Design 2.2 AXI Timer 2.2.1 IP 基本信息 2.2.2 IP 地址空间 2.2.3 级联模式 2.2.4 生成/捕获模式 2.3 AXI Interrupt 2.3.1 IP 基本信息 2.3.2 IP 地址空间 2.3.3 相关概念 2.3.4 参数配置 2.3.5 中断确认寄存器 3. PYNQ 代码 …

RAG综述:《A Comprehensive Survey of Retrieval-Augmented Generation (RAG)》

来源于《A Comprehensive Survey of Retrieval-Augmented Generation (RAG): Evolution, Current Landscape and Future Directions》 一、RAG所解决的问题 如何有效地从外部知识源检索相关信息,如何将这些信息无缝地融入到生成文本中,以及如何在保证生…

GitLab 如何跨版本升级?

本分分享 GitLab 跨版本升级的一些注意事项。 众所周知,GitLab 的升级必须要严格遵循升级路径,否则就会出现问题,导致升级失败。因此,在 GitLab 升级之前需要做好两件事情: 当前版本的确认升级路径的确认 极狐GitLa…

aws(学习笔记第十二课) 使用AWS的RDS-MySQL

aws(学习笔记第十二课) 使用AWS的RDS 学习内容: AWS的RDS-MySQL 1. 使用AWS的RDS 什么是RDS RDS就是Relation Database Service的缩写,是AWS提供的托管关系型数据库系统。让用户能够在 AWS Cloud 云中更轻松地设置、操作和扩展关系数据库。 数据库和we…

云原生-docker安装与基础操作

一、云原生 Docker 介绍 Docker 在云原生中的优势 二、docker的安装 三、docker的基础命令 1. docker pull(拉取镜像) 2. docker images(查看本地镜像) 3. docker run(创建并启动容器) 4. docker ps…

Spark 核心概念与宽窄依赖的详细解析

Spark 的介绍与搭建:从理论到实践_spark环境搭建-CSDN博客 Spark 的Standalone集群环境安装与测试-CSDN博客 PySpark 本地开发环境搭建与实践-CSDN博客 Spark 程序开发与提交:本地与集群模式全解析-CSDN博客 Spark on YARN:Spark集群模式…

【css】html里面的图片宽度设为百分比,高度要与宽度一样

场景&#xff1a;展示图片列表的时候&#xff0c;原始图片宽高不一致。 外层div的宽度自适应&#xff0c;图片宽度不能固定数值&#xff0c;只能设置百分比。图片高度也不能设置固定数值。 如何让图片的高度与图片的宽度一样呢&#xff1f; html代码 &#xff1a; <div cl…

c#使用COM接口设置excel单元格宽高匹配图片,如何计算?

c#使用COM接口设置excel单元格宽高如何换算 在实际工作中&#xff0c;经常需要在excel中插入图片。并设置单元格与图片对齐。但是excel单元格的宽度和高度使用不同的单位。单元格的宽度以字符宽度为单位&#xff0c;而高度以点为单位。如果按照实际值来设置&#xff0c;例如设…

RHCE web解析、dns配置、firewalld配置实验

RHCE web解析、dns配置、firewalld配置实验 实验一1.清理软件包2.安装软件包3.配置web服务查看默认测试页面报错讲解12 4.安装DNS解析需要的bind软件包5.修改网络配置&#xff0c;查错&#xff0c;修改权限 实验二配置文件haha.confnamed.confnamed.haha 实验一 1、学习方法 重…

JavaEE进阶----SpringMVC(三)---响应的获取

文章目录 1.cookie和session获取1.1servlet写法获取1.2spring获取cookie1.3传统方法获取session1.4sring获取session内容 2.访问静态页面3.一个项目部署多个服务4.responsebody的介绍5.返回html的片段6.不同相应content-type类型6.1text/html类型6.2application-json类型6.3 js…

Chromium 中MemoryMappedFile使用例子c++

文件映射基础介绍参考微软官网&#xff1a; 使用文件映射 - Win32 apps | Microsoft Learn 在文件中创建视图 - Win32 apps | Microsoft Learn 创建命名的共享内存 - Win32 apps | Microsoft Learn 使用大页面创建文件映射 - Win32 apps | Microsoft Learn 从文件句柄获取…

OpenHarmony4.1蓝牙芯片如何适配?触觉智能RK3568主板SBC3568演示

当打开蓝牙后没有反应时&#xff0c;需要排查蓝牙节点是否对应、固件是否加载成功&#xff0c;本文介绍开源鸿蒙OpenHarmony4.1系统下适配蓝牙的方法&#xff0c;触觉智能SBC3568主板演示 修改对应节点 开发板蓝牙硬件连接为UART1&#xff0c;修改对应的节点&#xff0c;路径为…

前端 JS面向对象 原型 prototype

目录 一、问题引出 二、prototype原型对象 三、小结 四、constructor 五、__proto__对象原型 六、原型链 一、问题引出 由于JS的构造函数存在内存浪费问题&#xff1a; function Star(name,age){this.namenamethis.ageagethis.singfunction () {console.log("唱歌&…

生成 Django 中文文档 PDF 版

文章目录 背景克隆 Django 文档和翻译仓库配置 conf.py设置和同步翻译生成 .pot 文件运行 sphinx-intl update复制翻译文件 构建 PDF生成 tex 文件安装 MikTeX生成 PDF Sphinx 生成文档 背景 浏览看到一个帖子&#xff0c;有个评论说可以用 sphinx 构建一个 pdf&#xff0c;正…

mysql 实现分库分表之 --- 基于 MyCAT 的分片策略详解

引言 在我们日常工作的项目中&#xff0c;特别是面向 C 端用户的产品&#xff0c;随着业务量的逐步扩大&#xff0c;数据量也呈指数级增长。为了应对日益增长的数据库压力&#xff0c;数据库优化已成为项目中不可或缺的一环&#xff0c;而分库分表则是海量数据优化方案中的重要…

JUC-locks锁

JUC-locks锁 1、JUC-locks锁概述2、管程模型3、ReentrantLock可重入锁3.1 ReentrantLock源码3.2 Sync静态内部类3.3 NonfairSync非公平锁3.4 FairSync公平锁 如有侵权&#xff0c;请联系&#xff5e; 如有错误&#xff0c;也欢迎批评指正&#xff5e; 1、JUC-locks锁概述 java…