vue解决部署文件缓存方式

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

vue2 配置打包输出文件名方式：

javascript 复制代码

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配置打包文件名称加时间戳方式

javascript 复制代码

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。没有再发生类似问题。。。