Vue WebApp - 加载最新版本答案

【问题标题】：Vue WebApp - Load latest buildVue WebApp - 加载最新版本
【发布时间】：2021-11-27 01:43:47
【问题描述】：

我正在使用 Vuexy BootstrapVue 模板构建一个 Vue.js 应用程序，部署在 Docker 容器中。

我发现，当我们将更新部署到我们的网络应用程序时，用户必须在浏览器中进行硬刷新才能加载应用程序的最新版本，否则他们将在缓存版本中导航。

我有没有办法强制客户端浏览器为用户加载最新版本？每次加载，还是每隔几个小时？

（我已将 Bootstrap-Vue 标记为透明度，但实际上不知道它是否与此问题有任何关系）

【问题讨论】：

标签： vue.js webpack browser-cache bootstrap-vue

【解决方案1】：

您正面临缓存问题，有多种方法可以解决此问题。

缓存控制

您可以使用带有max-age 或no-store、no-cache 的标头来控制缓存以简单地禁用它，例如这个问题/答案：How do we control web page caching, across all browsers?

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control https://csswizardry.com/2019/03/cache-control-for-civilians/

缓存破坏

在脚本标签的查询字符串中附加一个版本（例如：1.0.0）：

<script src="path/to/your/app.min.js?v=1.0.0"

并为每个构建更改该版本。

散列脚本文件

您还可以使用一些 webpack/rollup 配置来构建带有哈希的脚本，例如 app.bf43112.js

网页包

const config = {
  output: {
    path: PATHS.build,
    filename: "[name].[contenthash].js",
  },
};

汇总

const isProduction = process.env.NODE_ENV === 'production';

export default {
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: isProduction ? 'bundle[hash].js' : 'public/build/bundle.js',
  }
};

参考：Hashed file names using Rollup

服务工作者

另一个我从未测试过但听起来不错的解决方案是创建一个服务工作者来控制如何检索 js 文件： https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

你可以做一些事情，比如删除缓存，用你用 js 手动获取的响应来响应缓存等等。

【讨论】：