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

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]`, // 资源文件添加时间戳},},},}
})
重点是这个

在这里插入图片描述

在这里插入图片描述

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

相关文章:

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

最近遇到前端部署后浏览器得清缓存才能出现最新页面效果得问题 所以…按以下方式配置完打包就没啥问题了,原理很简单就是加个时间戳 /* eslint-disable no-undef */ import {defineConfig, loadEnv} from vite import path from path import createVitePlugins from…...

Dinky控制台:利用SSE技术实现实时日志监控与操作

1、前置知识 1.1 Dinky介绍 实时即未来,Dinky 为 Apache Flink 而生,让 Flink SQL 纵享丝滑。 Dinky 是一个开箱即用、易扩展,以 Apache Flink 为基础,连接 OLAP 和数据湖等众多框架的一站式实时计算平台,致力于流批一体和湖仓一体的探索与实践。 致力于简化Flink任务开…...

cannot locate symbol _ZTVNSt6__ndk119basic_ostringstreamIcNS_

编译正常,运行报错:cannot locate symbol _ZTVNSt6__ndk119basic_ostringstreamIcNS_ 简单记录: 1、编译ffmpeg so库,编译正常; 2、AndroidStudio建立项目,引用so库,编译正常,运行…...

SwiftUI开发教程系列 - 第4章:数据与状态管理

在 SwiftUI 中,数据与视图的绑定可以自动响应数据变化,实时更新 UI。SwiftUI 提供了多种数据管理方式,包括 @State、@Binding、@ObservedObject 和 @EnvironmentObject 等属性包装器。本章将逐一介绍这些属性包装器的用途及其最佳实践。 4.1 使用 @State 进行本地状态管理 …...

API接口:助力汽车管理与安全应用

随着汽车行业的飞速发展,越来越多的汽车管理技术被应用到交通安全和智慧交通系统中。在这一过程中,API接口起到了至关重要的作用。通过API接口,我们可以实现诸如车主身份验核、车辆信息查询等功能,从而为汽车智慧交通发展与安全应…...

聊一聊在字节跳动做项目质量改进的经验

引言 那一年,我刚毕业一年多,在第一家公司依然到了成长瓶颈期,一是不愿意频繁出差(做乙方的无奈);二是疲于每天重复的手工测试(团队缺乏技术氛围),技术上难有突破的机会…...

CSS基础概念:什么是 CSS ? CSS 的组成

什么是 CSS? CSS(层叠样式表,Cascading Style Sheets)是一种用于控制网页外观的样式表语言。通过定义样式规则,CSS 可以指定 HTML 页面中各个元素的显示方式,包括颜色、布局、字体、间距等。 与 HTML 专注…...

鸿蒙next版开发:ArkTS组件自定义事件分发详解

在HarmonyOS 5.0中,ArkTS提供了灵活的自定义事件分发机制,允许开发者对组件的事件进行细粒度的控制。自定义事件分发对于实现复杂的用户界面交互和提升用户体验至关重要。本文将详细解读如何在ArkTS中实现自定义事件分发,并提供示例代码进行说…...

计算机图形学论文 | 多边形中的点可见性快速算法

🦌🦌🦌读论文 🐨🐨摘要 针对点的可见性计算这一计算几何中的基础问题,提出一种支持任意查询点的可见多边形快速计算的基于多边形Voronoi图的点可见性算法。以与Voronoi骨架路径对应的Voronoi通道概念&…...

程序员输入问题

题目描述 程序员输入程序出现差错时,可以采取以下的补救措施:按错了一个键时,可以补按一个退格符“#”,以表示前一个字符无效;发现当前一行有错,可以按一个退行符“”,以表示“”与它之前的字符…...

雨晨 23H2 Windows 11 企业版 IE VCDX 适度 22631.4445 (VIP有限开放版本)

雨晨 23H2 Windows 11 企业版 IE VCDX 适度 22631.4445 (VIP有限开放版本) 文 件: 雨晨 23H2 Windows 11 企业版 适度 22631.4445 install.wim 提 取 码: ZZLR 大 小: 2824999564 字节 修改时间: 2024年11月9日, 星期六, 05:33:05 MD5 : 9C88…...

如何评估焊机测试负载均衡性能

评估焊机测试负载均衡性能的方法有很多,以下是一些建议: 1. 确定测试目标:首先,需要明确评估焊机测试负载均衡性能的目标。这可能包括提高生产效率、降低能耗、减少设备故障率等。明确目标有助于选择合适的评估方法和指标。 2. …...

【卷积基础】CNN中一些常见卷积(1*1卷积、膨胀卷积、组卷积、深度可分离卷积)

文章目录 逐通道卷积(Pointwise Convolution,1x1 卷积)主要作用逐通道卷积的操作过程优势代码示例典型应用 膨胀卷积(Dilated Convolution)主要作用工作原理膨胀率 (dilation rate) 的定义代码实例膨胀卷积的优点 组卷…...

组合(DFS)

给定两个整数 n 和 k,返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1: 输入:n 4, k 2 输出: [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ] 示例 2: 输入:n 1, k 1…...

linux盘扩容缩容

这里写目录标题 文件格式介绍问题:当根盘满了过后怎么办?解决方式: Xfs文件格式缩容扩容1. 备份2. 卸载home3. 缩容home(home盘为xfs文件格式)4. 扩容 /5. 恢复home备份 Ext4文件格式缩容扩容1. 备份(可选&…...

mysql中REPLACE语句使用说明

在 MySQL 中,REPLACE语句用于插入或更新数据。当插入的数据与表中的唯一索引或主键冲突时,它会先删除冲突的行,然后再插入新的数据。这是一种很方便的操作方式,可以简化在需要更新或插入数据时的代码逻辑。 它的语法结构与INSERT语…...

分享:文本转换工具:PDF转图片,WORD转PDF,WORD转图片

前言 鉴于网上大多数在线转换工具要么需要收费,要么免费后但转换质量极差的情况,本人开发并提供了PDF转图片,WORD转PDF,WORD转图片等的文本转换工具。 地址 http://8.134.236.93/entry/login 账号 账号:STAR001&a…...

mac crontab 不能使用问题简记

需要 crontab 有权限,如下截图设置 在访达上方【前往】-》【前往文件夹】输入/ 然后按 Command Shift . 显示隐藏文件,然后将 usr 放到左边栏 然后如下操作 系统设置中找到 隐私安全->完全访问磁盘 点击小锁头 点击号,将/usr/bin/c…...

Python 自动化测试应用

Python 自动化测试应用 目录 🧪 自动化测试基础与重要性📝 使用 pytest、unittest 进行运维脚本和工具的自动化测试🔧 自动化测试与 CI/CD 集成🛠 测试驱动开发(TDD)在运维脚本中的应用🐳 模拟…...

Python-安装与PyCharm的安装配置(1)

目录 安装 打开运行 PyCharm的安装 新建项目 安装 找到官网下载对应的电脑对应的版本 Welcome to Python.org -- 官网 下载稳定版的 安装记得勾选配置环境,这样自己就不需要再配置环境了 安装成功 至此python的运行环境就安装好了 打开运行 在开始菜单中可以…...

Leaf控制台终极指南:实时监控游戏服务器运行状态的完整教程

Leaf控制台终极指南:实时监控游戏服务器运行状态的完整教程 【免费下载链接】leaf A game server framework in Go (golang) 项目地址: https://gitcode.com/gh_mirrors/lea/leaf Leaf控制台是Go语言游戏服务器框架Leaf的强大实时监控工具,为游戏…...

从零实践:个人电脑上运行26M小参数GPT的预训练、微调与推理全流程指南

1. 为什么选择26M小参数GPT 在个人电脑上训练大语言模型听起来像天方夜谭,但26M参数的GPT模型让这成为可能。这个参数规模比主流的数十亿参数模型小了上千倍,但保留了GPT的核心架构和训练流程。我实测下来,在消费级显卡(如RTX 306…...

向量化计算失效的7大隐性陷阱,深度解析HotSpot向量编译器决策逻辑

第一章:向量化计算失效的7大隐性陷阱,深度解析HotSpot向量编译器决策逻辑HotSpot JVM 的向量化编译(Vector API 编译支持与循环自动向量化)并非在所有场景下都能生效。其背后由C2编译器的向量化决策引擎驱动,该引擎基于…...

【多模态技术解析】先对齐再融合:动量蒸馏如何重塑视觉与语言表征学习

1. 为什么视觉和语言要先对齐再融合? 想象一下你正在教一个小朋友认识动物。如果先给他看一张猫的图片,再告诉他"这是狗",小朋友肯定会困惑。这就是典型的模态未对齐问题——视觉信息和语言信息没有正确匹配。在多模态AI领域&#…...

智能水塔改造指南:用S7-200PLC+超声波传感器实现低成本自动化

智能水塔改造实战:S7-200PLC与超声波传感器的低成本自动化方案 在农村和小型工厂的实际运营中,水塔作为重要的供水设施,其稳定性和自动化程度直接影响着日常生产和生活。传统的人工监控方式不仅效率低下,还存在水位失控的风险。本…...

三菱Q00/PLC与台达DTA温控器通讯案例 功能:通过三菱QJ71C24N模块与台达DTA温...

三菱Q00/PLC与台达DTA温控器通讯案例 功能:通过三菱QJ71C24N模块与台达DTA温控器进行modbus-rtu通讯,实现温度读取、实际输出率(%)读取,及温度的设定、和温控探头类型的设定,PLC本体232-COM口与电脑通讯&am…...

爱毕业aibye发布六大权威平台排名,智能改写与高效写作功能一键完成,科研必备的AI工具

工具名称 核心功能 特色优势 Aibiye 论文生成降AI率 全学科覆盖、仿写优化、自动图表生成 Aicheck AI检测文献综述辅助 精准查新、3分钟高效成文 GPT学术版 润色/翻译/代码解释 多模型协同、PDF深度解析 摆平论文 大纲生成降重改写 三步出稿、本硕博通用 QuillB…...

解锁3D打印新境界:Blender 3MF插件全面指南 [特殊字符]

解锁3D打印新境界:Blender 3MF插件全面指南 🚀 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 在当今的3D打印工作流中,选择合适的文件…...

HarmonyOS6 半年磨一剑 - RcCheckbox 组件事件体系与交互逻辑

文章目录前言一、点击处理链1.1 核心点击处理函数1.2 两个点击入口二、三事件分层设计2.1 三个事件的对比2.2 事件使用示例三、labelDisabled 局部禁止机制3.1 设计意图3.2 适用场景四、RcCheckboxGroup 的数量限制拦截4.1 min/max 拦截机制4.2 数量限制示例总结前言 一个看似…...

5个环保主题HTML网页设计实战:从零到一构建绿色网站

1. 环保主题网页设计入门指南 第一次接触环保主题网页设计时,我盯着空白的编辑器整整半小时不知从何下手。直到看到某公益组织的网站,才发现原来绿叶图标和自然色系能瞬间传递环保理念。对于前端新手来说,这类主题最大的优势在于视觉元素明确…...