vue3+vite中如何打包添加随机号解决页面缓存更新不及时问题

问题:公众号h5页面调整后存在缓存问题,只有点击右上角三个点点里刷新才会更新修改后的内容。
解决:

  1. 给打包的文件添加时间戳使客户端强制拉取最新的文件(推荐)
    vite配置官方文档
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
const **Timestamp** = new Date().getTime();//随机时间戳

export default defineConfig({
  plugins: [vue()],
  css: {
    //css预处理
    preprocessorOptions: {
      scss: {
        /*
        引入var.scss全局预定义变量样式,
        如果引入多个文件,可以使用格式:
        '@import "@/assets/scss/globalVariable1.scss";@import "@/assets/scss/globalVariable2.scss";'
         */
        additionalData: '@import "@/assets/scss/globalVariable.scss";',
      },
    },
  },
  resolve: {
    alias: {
      //设置别名以便src下的文件可以使用@找到
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    port: 3000, // 启动端口
    open: true, // 服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    hmr: true, // 禁用或配置HMR连接
    // 设置 https 代理
    proxy: {
      '/api': {
        target: '',
        changeOrigin: true,
        rewrite: (path: string) => path.replace(/^\api/, ''),
      },
    },
  },
  // 打包配置
  base: '', // 静态资源基础路径
  build: {
    sourcemap: false, // 输出.map文件,默认是false
    rollupOptions: {
      output: {
        chunkFileNames: `static/js/[name].[hash]${Timestamp}.js`,
        entryFileNames: `static/js/[name].[hash]${Timestamp}.js`,
        assetFileNames: `static/[ext]/[name].[hash]${Timestamp}.[ext]`,
      },
    }
  },
})

打包后:
在这里插入图片描述

  1. 直接清除手机微信缓存
    点击手机上的设置-通用-存储空间-清理缓存
  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值