发布新的Vue应用程序版本时如何强制清除chrome中的缓存

Question

我使用

vue-cli

创建了一个应用程序，然后构建了

dist

文件夹用于生产。

该应用程序部署在带有 Flask 后端的

IIS

上并且工作正常。

当我必须进行一些更改并且必须重做部署时，就会出现问题。此后，用户打电话给我，因为应用程序无法工作，但如果我清除 chrome 缓存，应用程序会再次正常工作。

如何解决这个问题？有没有办法在发布新的应用程序版本时自动清除 chrome 缓存？

谢谢

我的 dist 文件夹

部署：在IIS上复制粘贴文件夹dist

如果 dist 文件夹中的文件正确，问题可能出在 axios 缓存中？我也对其余 api 做了一些更改

Answer 1

我遇到了同样的问题，并在运行构建命令之前更改（递增）package.json 中的版本号修复了该问题。

例如，默认情况下版本号设置为

"0.1.0"

package.json 文件：

{
  "name": "project-name",
  "version": "0.1.1",
  "private": true,
  ...
}

Answer 2

如果您使用

vue-cli

，那么它具有用于构建

dist

的内置 webpack 配置。事实上，它将哈希名称添加到输出文件中。但如果它以某种方式被删除，你可以将它添加回 webpack 配置，就像

  output: {
    filename: '[name].[hash].bundle.js'
  }

您的应用程序将如下所示：

更重要的是，你不需要处理如何将所有这些东西添加到 html 中，因为 webpack 会为你解决这个问题。

Answer 3

您需要在 js 文件中添加版本查询。这就是浏览器如何知道文件是否已更改并需要下载新版本的方式。

所以类似：

<script src="main.js?v=1.1"></script>

<script src="main.js?v=1.2"></script>

等等...

Answer 4

假设这与 Service Worker/PWA 无关，则可以通过返回前端版本来实现解决方案。

axiosConfig.js

axios.interceptors.response.use(
  (resp) => {
    let fe_version = resp.headers['fe-version'] || 'default'
    if(fe_version !== localStorage.getItem('fe-version') && resp.config.method == 'get'){
      localStorage.setItem('fe-version', fe_version)
      window.location.reload() // For new version, simply reload on any get
    }
    return Promise.resolve(resp)
  },
)

您还可以确保基于任何类型的唯一性返回

fe-version

，这里我使用了提交 SHA。

完整文章在这里：https://blog.francium.tech/vue-js-cache-not-getting-cleared-in-production-on-deploy-656fcc5a85fe

Answer 5

您无法访问浏览器的缓存，这将是一个巨大的安全漏洞。

要修复此问题，您必须发送一些带有 Flask 响应的标头，告诉浏览器不要缓存您的应用程序。

这是

express.js

的示例，让您了解一下：

  setHeaders: function (res, path, stat) {
    res.set('Cache-Control', 'no-cache, no-store, must-revalidate') // HTTP 1.1
    res.set('Pragma', 'no-cache') // HTTP 1.0
    res.set('Expires', '0') // Proxies
  }

您可以在此处阅读更多有关缓存的信息。

Answer 6

这是一篇较旧的帖子，但由于我无法在网上找到此问题的解决方案，因此我将其发布在这里，以防其他人发现它有用。

我通过 webpack.mix.js 文件将哈希添加到应用程序块文件中，添加：

mix.webpackConfig({
    output: {
        chunkFilename: 'js/[name].js?id=[chunkhash]',
    },
})

这会向实际块添加指纹，而不仅仅是 app.js 文件。您还可以通过添加 version(['public/js/app.js']); 向 app.js 文件添加版本名称。在文件末尾，或将 filename: '[name].js?[hash]' 添加到输出块。

我完整的 webpack.mix.js：

const mix = require('laravel-mix');

mix.webpackConfig({
output: {
    chunkFilename: 'js/main/[name].js?id=[chunkhash]',
  }
}).js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
    //
]).version(['public/js/app.js']);

在我使用的 Laravel Blade 文件中

<script src="{{ mix('js/app.js') }}"></script>

使用正确的版本指纹加载 app.js 文件。

Answer 7

我的答案是在我的 DNS 提供商级别进行缓存。基本上，我使用的是 Cloudflare DNS 代理，他们正在缓存网站，因此在开发模式下我没有获得代码更新。我必须多次清除缓存才能更改任何内容。我必须等待很长一段时间才能更新。

将其关闭，它就不再这样做了。

Answer 8

我想建议的方法

<script src="{{ asset('js/app.js?time=') }}{{ time() }}" defer></script>

Answer 9

在 publc/index.html 中添加以下脚本

<head>
...
  <script type="text/javascript" language="javascript">
    var timestamp = (new Date()).getTime();
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "<%= BASE_URL %>sample.js?t=" + timestamp;
    document.head.appendChild(script);
  </script>
...
</head>

Answer 10

我们在使用 React 时也遇到了同样的问题（特别是使用 i18next 库进行翻译），而由

Delphin RUKUNDO 提供的获得最多支持的答案对我们来说效果非常好。

Answer 11

你能尝试一下吗？

vm.$forceUpdate();

组件本身也可能需要一个唯一的密钥：

<my-component :key="unique" />

发布新的Vue应用程序版本时如何强制清除chrome中的缓存

问题描述投票：0回答：11

11个回答

最新问题

发布新的Vue应用程序版本时如何强制清除chrome中的缓存

问题描述 投票：0回答：11

11个回答

最新问题

问题描述投票：0回答：11