VueJS /浏览器缓存生成版本

我有一个VueJS应用程序。当我运行npm run build时，它会创建一组新的dist/*文件，但是，当我将它们加载到服务器上时（在删除旧版本之后）并在浏览器中打开该页面，它会加载旧版本（来自缓存）。当我刷新页面时，它加载新代码没有问题。VueJS /浏览器缓存生成版本

这是我的index.html：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
     <meta http-equiv="cache-control" content="max-age=0" /> 
     <meta http-equiv="cache-control" content="no-cache" /> 
     <meta http-equiv="expires" content="-1" /> 
     <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> 
     <meta http-equiv="pragma" content="no-cache" /> 
     <link rel="stylesheet" href="/static/css/bootstrap.min.css"/> 
    </head> 
    <body> 
     <div id="app"></div> 
    </body> 
</html>

有没有办法迫使它每次或（理想）加载新的代码，以检查是否旧文件从服务器了，然后刷新浏览器吗？

来源

2017-08-24 andrei

您是否尝试过为每个构建的文件名添加随机哈希？这将强制浏览器“刷新”并加载新版本，但如果请求相同的文件散列，它仍会缓存它。 Angular 2做到了这一点。例如，'build.js'将是'build.32048uueo02348324.js'，其中hash表示构建的当前“版本”，并且当创建新构建时，旧文件将被销毁而不是新文件一个不同的散列。这样你就不必担心任何HTTP头，除非你想要更多的控制。 – Lansana

这可以帮助https://stackoverflow.com/questions/1011605/clear-the-cache-in-javascript – jakob

生成已经这样做，这里是我最新的版本的示例：'app.c6831a12f10f0ece2c67.js' – andrei

我们在这个相同的问题上苦苦挣扎，发现有些人的浏览器甚至不会拉动最新版本，除非他们手动刷新。我们在各个层次上缓存问题，包括我们托管文件的CDN。

我们还努力维护版本，并能够在出现问题时快速重新部署以前的版本。

我们的解决方案（使用项目基于VUE-CLI的WebPack）：

1）我们建立的分布有一个版本的特定文件夹，而不是静态的。这也有助于我们跟踪构建，并在需要时“撤消”部署。要更改'静态'目录，请更改index.js中'build'下的'assetsSubDirectory'，并将'assetsPublicPath'更改为您的CDN路径。

2）我们使用Webpack Assets Manifest构建指向所有资产的manifest.json文件。

3）我们上传版本文件夹（包含js和css）到我们的CDN。

4）我们在后端服务器上托管一个动态的index.hmtl文件。后台服务器使用从manifest.json中的数据中提取的模板系统填充样式表和脚本的链接（请参阅＃5）。

5）要发布新版本，我们将manifest.json发布到后端服务器。我们通过GraphQL端点执行此操作，但您可以手动将json文件放在某处。我们将其存储在数据库中并使用它来填充index.html。

结果：立即更新和简单的跟踪和更改您的版本的能力。我们发现它会立即在所有用户的浏览器中提供新版本。

另一项好处是：我们正在构建一个需要高安全性的应用程序，并且在我们已经安全的后端托管index.html使我们能够更轻松地通过安全审计。

来源

2017-08-25 02:52:20

我觉得我的痛苦少得多。我让客户端请求服务器版本，然后将当前服务器版本与客户端存储在'localStorage'变量中的版本进行比较。如果它们不同，我会'window.location.reload（true）;'强制浏览器从服务器获取新文件。至少它似乎工作。 – andrei

VueJS /浏览器缓存生成版本

回答

相关问题