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

news2024/11/13 11:52:16

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

/* 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]`, // 资源文件添加时间戳
				},
			},
		},
	}
})


重点是这个

在这里插入图片描述

在这里插入图片描述

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

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

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

相关文章

【C++滑动窗口】1297. 子串的最大出现次数|1748

本文涉及的基础知识点 C算法:滑动窗口及双指针总结 固定长度滑动窗口 LeetCode1297. 子串的最大出现次数 给你一个字符串 s ,请你返回满足以下条件且出现次数最大的 任意 子串的出现次数: 子串中不同字母的数目必须小于等于 maxLetters 。…

【Vue】简易博客项目跟做

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

机器人助力Bridge Champ游戏:1.4.2版本如何提升玩家体验

在Bridge Champ游戏中,机器人扮演着桥牌游戏的“无名英雄”角色,默默地提升玩家体验。凭借智能化的设计,这些机器人不仅能够陪练,也大大提升了比赛的流畅度与趣味性。 Bridge Champ是什么 Bridge Champ是一个基于Ignis公链的在线…

U-Mail反垃圾邮件网关精准拦截各种垃圾病毒邮件

在当今数字化时代,电子邮件已成为企业沟通不可或缺的一部分。然而,其开放性也使得电子邮件系统容易受到垃圾邮件和恶意软件的侵袭。根据最新数据,2024年第二季度,国内企业邮箱用户共收到9.1亿封垃圾邮件,这一数字比上一…

Docker可视化管理面板DPanel的安装

本文软件由网友 rui 推荐; 什么是 DPanel ? DPanel 是一款 Docker 可视化管理面板,旨在简化 Docker 容器、镜像和文件的管理。它提供了一系列功能,使用户能够更轻松地管理和部署 Docker 环境。 软件特点: 可视化管理&…

Java——final用法

一、final 介绍 在Java中,final关键字有多种用途,可以用来修饰变量、方法和类。它的主要作用是确保所修饰的内容不可改变。 二、final 用法 1、修饰变量 1)局部变量 当一个局部变量被声明为final时,它的值在初始化后就不能被…

科技改变生活:最新智能开关、调光器及插座产品亮相

根据QYResearch调研团队的最新力作《欧洲开关、调光器和插座市场报告2023-2029》显示,预计到2029年,欧洲开关、调光器和插座市场的规模将攀升至57.8亿美元,并且在接下来的几年里,将以4.2%的复合年增长率(CAGR&#xff…

走进算法大门---双指针问题(一)

一.双指针算法介绍 概念:双指针是指在遍历数据结构(如数组、链表等)时使用两个指针,通过特定的移动规则来解决问题。这两个指针可以同向移动,也可以相向移动。 同向双指针:常用于解决需要两个位置信息的问…

用 Python 从零开始创建神经网络(一)

用 Python 从零开始创建神经网络(一) 引言1. A Single Neuron:Example 1代码部分: Example 2代码部分: 2. A Layer of Neurons:Example 1代码部分: 引言 本教程专为那些对神经网络已有基础了解…

深度学习⑨GANs

Discriminative and Generative Models Deep learning中主要两种模型 判别模型专注于从输入预测输出,例如分类任务。学习数据点和标签之间的特征 生成模型则试图理解数据是如何产生的,能够生成新的数据样本。理解数据分布和是否可以被预测 Quiz time: Discriminative mo…

[产品管理-58]:安索夫矩阵矩阵帮助创业者确定研发出来的产品在市场中定位策略

目录 一、提出背景 二、核心思想与结构 三、应用背景与领域 四、实践案例 安索夫矩阵(Ansoff Matrix),也被称为产品/市场方格或成长矢量矩阵,其应用背景可以从以下几个方面进行详细阐述: 一、提出背景 安索夫矩阵…

物联网对商业领域的影响

互联网彻底改变了通信方式,并跨越了因地理障碍造成的人与人之间的鸿沟。然而,物联网(IoT)的引入通过使设备能够连接到互联网,改变了设备的功能。想象一下,你的闹钟连接到互联网,并且能够用你的声…

微信小程序——用户隐私保护指引填写(详细版)

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…

LED点阵显示(Proteus 与Keil uVision联合仿真)(点阵字模提取)

点阵字模提取: https://pan.baidu.com/s/1DZSeLyD_SUkaHRgTm26o-A 提取码: 1111 一、LED点阵显示器结构 点亮点阵中一个发光二极管条件:对应行为高电平,对应列为低电平。如在很短时间内依次点亮很多个发光二极管,LED点阵就可显示…

JDBC学习记录

文章目录 一、JDBC简介1.1、 JDBC概念1.2、 JDBC本质1.3、 JDBC好处 二、JDBC快速入门2.1、 编写代码步骤2.2、 代码示例 三、JDBC API详解3.1、DriverManager3.1.1、注册驱动3.1.2、获取连接 3.2、Connection3.2.1、获取执行对象3.2.2、事务管理 3.3、Statement3.3.1、执行DDL…

[Linux] 进程等待 | 进程替换

🪐🪐🪐欢迎来到程序员餐厅💫💫💫 主厨:邪王真眼 主厨的主页:Chef‘s blog 所属专栏:青果大战linux 总有光环在陨落,总有新星在闪烁 我有一个朋友&#x…

运用Agent搭建“狼人杀”游戏服务器端!

背景 从23年开年以来,大模型引爆了各行各业。去年比较出圈的是各类文生图的应用,比如Stable Diffusion。网上可以看到各类解释其背后的原理和应用的文章。另外一条平行线,则是文生文的场景。受限于当时LLM(大语言模型&#xff09…

笔记分享 |【黑马Pink老师】Web APIs

Web API 基本认知 介绍 严格意义上讲,我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系; ECMAScript 简称 ES 它提供了一套语言标准规范,如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的&am…

Android Glide动态apply centerCropTransform(),transition withCrossFade动画,Kotlin

Android Glide动态apply centerCropTransform(),transition withCrossFade动画,Kotlin import android.graphics.Bitmap import android.os.Bundle import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity import com.bumptech.glide.Glide import …

大数据学习10之Hive高级

1.Hive高级 将大的文件按照某一列属性进行GROUP BY 就是分区,只是默认开窗存储; 分区是按行,如一百行数据,按十位上的数字分区,则有十个分区,每个分区里有十行; 分桶是根据某个字段哈希对桶数取…