vue3封装而成的APP ，在版本更新后，页面显示空白

一、问题展示

更新之后页面空白，打不开，主要是由于缓存造成的

二、解决办法

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不对，都可能导致