一、问题展示
更新之后页面空白，打不开 ，主要是由于缓存造成的
二、解决办法
1、随机数代码实现
使用随机数来动态的生成静态资源目录名可以避免浏览器缓存，但同时每次也会导致浏览器每次都下载最新的资源。如果静态资源过大，可能会影响加载速度。vite.config.js文件
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path, { resolve } from "path";
import postCssPxToRem from "postcss-pxtorem";
// 获取当前时间戳或随机数
const randomNum = Math.random().toString(36).substring(2, 8); // 随机数：生成一个6位的随机字符串
// https://vitejs.dev/config/
export default defineConfig({
server: {
host: "0.0.0.0",
port: 8080,
open: true,
},
base: "./",
plugins: [vue()],
resolve: {
//别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
alias: [
{
find: "@",
replacement: resolve(__dirname, "src"),
},
],
},
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 128, // 1rem，根据 设计稿宽度/10 进行设置
propList: ["*"], // 需要转换的属性，这里选择全部都进行转换
}),
],
},
},
build: {
outDir: "dist", // 指定输出文件
assetsDir: `static/${Math.random()}`, // 动态生成目录，保证唯一性
rollupOptions: {
output: {
chunkFileNames: "static/js/[name]-[hash].js",
entryFileNames: "static/js/[name]-[hash].js",
assetFileNames(assetInfo) {
if (assetInfo.name.endsWith(".css")) {
return "static/css/[name]-[hash].[ext]";
}
// 针对图片文件类型做分类
if (
["png", "jpg", "jpeg", "gif", "svg", "PNG", "JPG"].some((ext) =>
assetInfo.name.endsWith(ext)
)
) {
// 如果图片文件路径包含 'img' 或 'icons' 等关键字，则根据不同类型分类
if (assetInfo.name.includes("icon") || assetInfo.name.includes("icons")) {
return "static/icons/[name]-[hash].[ext]";
}
if (assetInfo.name.includes("img") || assetInfo.name.includes("imgs")) {
return "static/img/[name]-[hash].[ext]";
}
return "static/img/[name]-[hash].[ext]"; // 默认图片文件夹
}
// 针对字体文件夹
if (
["ttf", "woff", "woff2"].some((ext) =>
assetInfo.name.endsWith(ext)
)
) {
return "static/fonts/[name]-[hash].[ext]";
}
// 默认处理其他资源
return "static/css/[name]-[hash].[ext]";
},
},
},
},
});
2、实现过程
randomNum:首先会生成一个随机数
assetDir:使用模板字符串讲randomNum插入到assetsDir配置项中。每次构建时，都会生成一个新的目录名
chainWebpack:WebPack的chainWebpack API允许你在构建时Webpack配置进行细粒度的控制。虽然此时我们不需要对其他部分进行更复杂的配置，但他可以为以后的构建提供灵活的定制
三、原理
1、解释说明
浏览器缓存的目的时为了提高访问速度，避免重复下载相同的资源。当静态资源没有变化时，浏览器会根据url中的文件名，文件路径和资源的http缓存策略来决定是否从缓存中加载资源。
而使用随机数的主要原理时通过改变静态资源的路径，强制浏览器每次都去请求最新的资源 （因为路径变了，浏览器就会变化使用缓存中的旧资源了，每次都会下载新的资源）
(1)优点
避免缓存问题，对于经常更新的资源（js、css等），可以确保浏览器总是加载最新的文件，避免了由于浏览器缓存问题导致的用户看到旧版本的情况
控制缓存，你可以通过改变文件路径的方式来主动控制缓存的失效时机，不需要依赖服务器的缓存策略
(2)缺点
每次都请求最新资源，增加了请求次数，增加了网络带宽消耗，潜在的性能问题
四、其他
1、内容哈希实现（优解）
许多构建工具（如 Webpack、Vite 等）提供了内容哈希的功能。你可以在文件名中添加文件内容的哈希值，这样只有当文件内容发生变化时，文件名才会发生变化。这样就可以避免缓存问题，并且只有文件内容更新时才重新下载资源。
部分代码实现
// vite.config.js
export default {
build: {
rollupOptions: {
output: {
assetFileNames: '[name].[hash].[ext]', // 文件名中包含哈希值
}
}
}
}
2、不是缓存导致的问题更新版本出现白屏
可以检查别的情况，有可能时路由错误导致找不到页面，路由重定向回到首页
{
path: '/:pathMatch(.*)*', // 处理所有未匹配的路由
name: 'NotFound',
redirect: '/home'
}或者你请求数据的token不对，都可能导致
