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} = env
	return {
		// 部署生产环境和开发环境下的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-extensions
			extensions: ['.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]`, // 资源文件添加时间戳
				},
			},
		},
	}
})


重点是这个

在这里插入图片描述

在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【人工智能】10分钟解读-深入浅出大语言模型(LLM)——从ChatGPT到未来AI的演进

文章目录 一、前言二、GPT模型的发展历程2.1 自然语言处理的局限2.2 机器学习的崛起2.3 深度学习的兴起2.3.1 神经网络的训练2.3.2 神经网络面临的挑战 2.4 Transformer的革命性突破2.4.1 Transformer的核心组成2.4.2 Transformer的优势 2.5 GPT模型的诞生与发展2.5.1 GPT的核心…

FFmpeg存放压缩后的音视频数据的结构体:AVPacket简介,结构体,函数

如下图的解码流程,AVPacket中的位置 FFmpeg源码中通过AVPacket存储压缩后的音视频数据。它通常由解复用器(demuxers)输出,然后作为输入传递给解码器。 或者从编码器作为输出接收,然后传递给多路复用器(mux…

Jmeter系统入门教程(安装、组件使用、Demo展示、连接数据库、压测报告)

​压测工具实际项目中接触过ab,ab算一个常用而又直接的工具,jmeter以前自己测试过,但如此系统,细致的测试还是第一次,这个博主很多文章都很细致,问题解答及时一jmeter简介jmeter 是一款专门用于功能测试和压…

D3入门:概念、主要特点、基本功能、常见应用场景

D3.js(Data-Driven Documents)是一个JavaScript库,用于基于数据操作文档。它利用了HTML、SVG和CSS等Web标准技术,使得开发者可以创建丰富的交互式图表和数据可视化。D3.js的强大之处在于其灵活的数据绑定机制和对DOM元素的高效操作…

人工智能在智能家居中的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 人工智能在智能家居中的应用 人工智能在智能家居中的应用 人工智能在智能家居中的应用 引言 人工智能概述 定义与原理 发展历程 …

GESP4级考试语法知识(贪心算法(一))

海盗船代码&#xff1a; #include<iostream> #include<algorithm> using namespace std; int data[21]; int main() {int n;cin>>n;for(int i0;i<n;i)cin>>data[i];sort(data,datan);int temp0,sum0;for(int i0;i<n;i){tempdata[i];if(temp>…

了解sessionStorage 和 localStorage:浏览器存储的差异与用途

在Web开发中&#xff0c;localStorage、cookies 和 sessionStorage 是三种常用的客户端数据存储方式&#xff0c;通俗的来理解就是存储在浏览器前端的非关系型数据库&#xff0c;它们各自有不同的特点和用途&#xff1a; localStorage 持久性&#xff1a;数据在页面会话结束时…

微信自动化加好友

在职场中&#xff0c;拓展人脉是成功的关键。手动添加好友不仅耗时&#xff0c;还容易出错。 试试这个批量自动添加的必备方法&#xff0c;告别手动添加客户的繁琐&#xff0c;私域运营也能如此高效! 再也不用一个个统计数据&#xff0c;浪费时间又累心。 具体操作如下&#…

ctfshow-web入门-反序列化(web260-web264)

目录 1、web260 2、web261 3、web262 4、web263 5、web264 1、web260 要求传入的内容序列化后包含指定内容即可&#xff0c;在 PHP 序列化中&#xff0c;如果键名或值包含 ctfshow_i_love_36D&#xff0c;那么整个序列化结果也会包含这个字符串。 payload&#xff1a; ?…

编写第一个 Appium 测试脚本:从安装到运行!

前言 最近接到一个测试项目&#xff0c;简单描述一下&#xff0c;需求就是&#xff1a;一端发送指令&#xff0c;另一端接受指令并处理指令。大概看了看有上百条指令&#xff0c;点点点岂不是废了&#xff0c;而且后期迭代&#xff0c;每次都需要点点点&#xff0c;想想就头大…

攻防世界36-fakebook-CTFWeb

攻防世界36-fakebook-CTFWeb 没发现什么&#xff0c;随便join发现blog有过滤&#xff0c;dirsearch扫描一下&#xff0c;发现robots.txt&#xff0c;和flag.php(不能直接看)&#xff0c;发现源码泄露&#xff0c;下载得源码&#xff1a; <?phpclass UserInfo{public $nam…

【Vue】简易博客项目跟做

项目框架搭建 1.使用vue create快速搭建vue项目 2.使用VC Code打开新生成的项目 端口号简单配置 修改vue.config.js文件&#xff0c;内容修改如下 所需库安装 npm install vue-resource --save --no-fund npm install vue-router3 --save --no-fund npm install axios --save …

delphi fmx android 自动更新(一)

12.2 android10测试通过 一,安卓权限设置 1,REQUEST_INSTALL_PACKAGES 权限 2,INTERNET 权限 3,READ_EXTERNAL_STORAGE 权限 4,WRITE_EXTERNAL_STORAGE 权限 5,READ_PHONE_STATE 二,安卓下载过程 一般是从http下载安装包 apk 所以,如果是http 则,manife…

VSCode本地C/C++环境配置

基本环境下载 1.我的系统是windows&#xff0c;自己先下载安装VSCode&#xff0c;网上视频实在太多&#xff0c;我建议跟着B站视频操作。 2.下载安装好后你需要明白&#xff1a;VSCode只是一个编辑工具&#xff0c;我们要写C/C代码得编译运行&#xff0c;所以我们要配置它在w…

[CKS] K8S NetworkPolicy Set Up

最近准备花一周的时间准备CKS考试&#xff0c;在准备考试中发现有一个题目关于不安全项目修复的题目。 ​ 专栏其他文章: [CKS] Create/Read/Mount a Secret in K8S-CSDN博客[CKS] Audit Log Policy-CSDN博客 -[CKS] 利用falco进行容器日志捕捉和安全监控-CSDN博客[CKS] K8S Ne…

【实验10】卷积神经网络(1)卷积算子

目录​​​​​​​ 1 自定义二维卷积算子 2 自定义带步长和零填充的二维卷积算子 3 实现图像边缘检测 4 自定义卷积层算子和汇聚层算子 4.1卷积层&#xff1a; 4.2 汇聚层&#xff1a; 5 学习torch.nn.Conv2d()、torch.nn.MaxPool2d()&#xff1b;torch.nn.avg_pool2d()&…

英伟达HOVER——用于人形机器人的多功能全身控制器:整合不同的控制模式且实现彼此之间的无缝切换

前言 前几天&#xff0c;一在长沙的朋友李总发我一个英伟达HOVER的视频(自从我今年年初以来持续不断的解读各大顶级实验室的最前沿paper、以及分享我司七月在具身领域的探索与落地后&#xff0c;影响力便越来越大了&#xff0c;不断加油 )&#xff0c;该视频说的有点玄乎&…

vue-h5:在h5中实现相机拍照加上身份证人相框和国徽框

1.基础功能 参考&#xff1a; https://blog.csdn.net/weixin_45148022/article/details/135696629 https://juejin.cn/post/7327353533618978842?searchId20241101133433B2BB37A081FD6A02DA60 https://www.freesion.com/article/67641324321/ https://github.com/AlexKrat…

如何使用IDEA创建Maven/SSM工程?

鉴于很多学校还在教授SSMJSP&#xff0c;很多同学不会使用IDEA创建Maven工程&#xff0c;这里进行说明 windows下安装jdk并配置环境 添加链接描述Windows下安装Maven并配置环境 首先你要本地安装jdk&#xff0c;Maven并配置基础环境变量&#xff0c;然后对IDEA进行jdk、Mave…

SD-WAN远程监控组网解决方案

在当今&#xff0c;企业对远程监控与管理的需求日益增加。无论是连锁门店的实时运营监控&#xff0c;还是跨区域的团队项目协作&#xff0c;企业都需要高效、稳定且安全的网络支持。传统网络连接方式&#xff0c;例如MPLS&#xff08;多协议标签交换&#xff09;&#xff0c;虽…