vue3打包h5平板每次都要清缓存的问题及解决

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

const timeStamp = new Date().getTime();

module.exports = {
  configureWebpack: {
    output: {
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/[name].${timeStamp}.js`,
    },
  },
  css: {
    extract: {
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/[name].${timeStamp}.css`,
    },
  }
};

module.exports = {
  configureWebpack: {
    output: {
      filename: 'js/[name].[contenthash].js',
      chunkFilename: 'js/[name].[contenthash].js',
    },
  },
  css: {
    extract: {
      filename: 'css/[name].[contenthash].css',
      chunkFilename: 'css/[name].[contenthash].css',
    },
  }
};

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        root /yourdir/;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # 对 HTML 文件设置不缓存
    if ($request_filename ~* .*\.(htm|html)$) {
        add_header Cache-Control "no-store, no-cache, must-revalidate";
    }

    # 对带有哈希的 JS、CSS 文件设置长期缓存
    location ~* \.(js|css)$ {
        root /yourdir/;
        # 设置缓存时间为1年
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

// 以 main.js 为例
const currentVersion = require('../package.json').version; // 或 process.env.VUE_APP_VERSION
const storedVersion = localStorage.getItem('appVersion');

if (currentVersion !== storedVersion) {
  localStorage.clear(); // 或选择性清理
  sessionStorage.clear(); // 根据需要决定
  localStorage.setItem('appVersion', currentVersion);
  // 可以根据需要决定是否强制刷新页面
  // window.location.reload(true);
}