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

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


重点是这个

在这里插入图片描述

在这里插入图片描述

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


http://www.kler.cn/a/386387.html

相关文章:

  • llama factory lora 微调 qwen2.5 7B Instruct模型
  • Spring Cloud Gateway(分发请求)
  • 微服务day08
  • python 2小时学会八股文-数据结构
  • 985研一学习日记 - 2024.11.14
  • 【excel】easy excel如何导出动态列
  • Spring中的过滤器和拦截器
  • ORU——ORAN 无线电单元参考架构
  • GPU 服务器厂家:挑战与机遇交织,开拓未来计算之路
  • Tencent Hunyuan3D
  • mysql做数据统计图表常用的sql语句 部门人数 工龄 学历 年龄 性别 在职人员 兴趣分析查询
  • Python-利用Pyinstaller,os库编写一个无限弹窗整蛊文件(上)
  • 家庭财务管理系统|基于java和小程序的家庭财务管理系统设计与实现(源码+数据库+文档)
  • 华为eNSP:AAA认证(pap和chap)telnet/ssh
  • 乐尚代驾十订单支付seata、rabbitmq异步消息、redisson延迟队列
  • docker网络配置:bridge模式、host模式、container模式、none模式
  • 设计模式-七个基本原则之一-接口隔离原则 + SpringBoot案例
  • 苍穹外卖的分层所用到的技术以及工具+jwt令牌流程图(jwt验证)
  • java八股第一天
  • 斑马打印机如何与工业系统(如MES、ERP、数据库等)自动化通讯?
  • 计算机网络八股文个人总结
  • 友思特应用 | 动态捕捉:高光谱相机用于移动产线上的食品检测
  • Vosk 进行中文语音识别实例
  • Java基SpringBoot+Vue的高校院系学生信息管理系统(附源码,文档)
  • //二维数组的遍历方式
  • 分布式数据库中间件mycat