vue解决部署文件缓存方式

发布时间:2024年01月19日

问题:系统上线后,除了bug。紧急修复后,发现安卓正常,ios上海市有问题。通过debug后发现,ios上缓存严重。于是想到了打包文件加时间戳的方式来去除缓存。
vue2 配置打包输出文件名方式:

const baseUrl = "./"
const timestr = new Date().getTime()
module.exports = {
    outputDir: "delixi",
    publicPath: baseUrl, // 根据你的实际情况更改这里
    // 选项...
    lintOnSave: false,
    productionSourceMap: false,
    devServer: {
        port: 8080,
        overlay: {
            warnings: true,
            errors: true
        }
    },
    filenameHashing: false,
    configureWebpack: {
        performance: {hints: false},
        output: {
            filename: `js/js[name].${timestr}.js`,
            chunkFilename: `js/chunk.[id].${timestr}.js`,
        }
    },
    css: {
        extract: {
            filename: `css/[name].${timestr}.css`,
            chunkFilename: `css/chunk.[id].${timestr}.css`,
        }
    }

}

附:vite配置打包文件名称加时间戳方式

import { resolve } from 'path';
import { defineConfig, loadEnv } from 'vite';
import vue2 from '@vitejs/plugin-vue2';
const Timestamp = new Date().getTime();//随机时间戳
export default ({ mode }) => {
  const { VITE_PORT, VITE_BASE_URL, VITE_PROXY_DOMAIN_REAL } = loadEnv(mode, process.cwd());

  return defineConfig({
    base: VITE_BASE_URL,
    plugins: [vue2()],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
      },
    },
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            hack: `true; @import (reference) "${resolve('src/style/variables.less')}";`,
          },
          math: 'strict',
          javascriptEnabled: true,
        },
      },
    },
    server: {
      // 是否开启 https
      https: false,
      // 端口号
      port: VITE_PORT,
      // 监听所有地址
      host: '0.0.0.0',
      // 服务启动时是否自动打开浏览器
      open: false,
      // 允许跨域
      cors: true,
      // 自定义代理规则
      proxy: {
        '/admin': {
          target: VITE_PROXY_DOMAIN_REAL,
          ws: true,
          changeOrigin: true,
          // rewrite: (path) => path.replace(/^\/admin/, ''),
        },
        '/master': {
          target: VITE_PROXY_DOMAIN_REAL,
          ws: true,
          changeOrigin: true,
          // rewrite: (path) => path.replace(/^\/admin/, ''),
        },
      },
    },
    build: {
      outDir: 'delixi',
      // publicPath: './',
      // 设置最终构建的浏览器兼容目标
      target: 'es2015',
      // 构建后是否生成 source map 文件
      sourcemap: false,
      //  chunk 大小警告的限制(以 kbs 为单位)
      // chunkSizeWarningLimit: 2000,
      // 启用/禁用 gzip 压缩大小报告
      reportCompressedSize: false,
      rollupOptions: {
        output: {
          chunkFileNames: `static/js/[name].[hash]${Timestamp}.js`,
          entryFileNames: `static/js/[name].[hash]${Timestamp}.js`,
          assetFileNames: `static/[ext]/[name].[hash]${Timestamp}.[ext]`,
        },
      }
    },
  });
};

这次h5活动遇到的大坑:
1、使用vite做的h5项目,在ios上缓存刷新不掉,或者很久才能刷新掉。打包文件加时间戳,部分手机也无效
2、iOS上,点击事件有时候会失效。或者是路由跳转不过去。同一个手机有时候会发剩,有时候正常。最终重构项目,不使用vite。没有再发生类似问题。。。

推荐:好用的230G电话卡

文章来源:https://blog.csdn.net/qq_29484537/article/details/135699965
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。