vue解决部署文件缓存方式

2024-01-20 10:52:02
开发
32

问题：系统上线后，除了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]`,
        },
      }
    },
  });
};