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

原文地址：https://blog.csdn.net/qq_55681529/article/details/144687090

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！