Vue WebApp - 加载最新版本

Question

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

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

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

（为了透明，我已经标记了 Bootstrap-Vue，但实际上并不知道它是否与这个问题有任何关系）

Answer 1

您遇到了缓存问题，有多种方法可以解决这个问题。

缓存控制

您可以使用 header 和 max-age 或 no-store 控制缓存，no-cache 来简单地禁用它，像这样 question/answer：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/

缓存破坏

A追加一个版本（例如：1.0.0）来查询脚本标签的字符串：

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

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

散列脚本文件

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

webpack

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手动获取的响应来响应缓存等

Vue WebApp - 加载最新版本

Vue WebApp - Load latest build

vue.js

webpack

browser-cache

bootstrap-vue

缓存控制

缓存破坏

散列脚本文件

webpack

汇总

服务工作者