html – VueJS /浏览器缓存生产版本

我有一个VueJS应用程序.每当我运行npm run build时它会创建一组新的dist / *文件,但是,当我在服务器上加载它们(删除旧版本后),并在浏览器中打开页面时,它会加载旧版本(来自缓存i)假设).当我刷新页面时,它加载新代码没问题.

这是我的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>

有没有办法强制它每次加载新代码或(理想情况下)检查旧文件是否从服务器中消失,然后刷新浏览器?

@H_403_8@

解决方法

我们在同样的问题上苦苦挣扎,发现有些人的浏览器甚至不会提取最新版本,除非他们手动刷新.我们在各个层面都有缓存问题,包括我们托管文件的CDN.

我们还努力维护版本,并且如果出现问题,我们可以快速重新部署以前的版本.

我们的解决方案(使用基于vue-cli Webpack的项目):

1)我们构建分发版本以具有特定于版本的文件夹而不是“静态”.这还有助于我们跟踪构建并在需要时“撤消”部署.要更改“静态”目录,请在index.js中的“build”下更改“assetsSubDirectory”,并将“assetsPublicPath”更改为CDN路径.

2)我们使用Webpack Assets Manifest构建一个指向所有资产的manifest.json文件.我们的清单包含所有文件的哈希,因为它是一个高安全性的应用程序.

3)我们将版本化文件夹(包含js和css)上传到我们的CDN.

4)(可选)我们在后端服务器上托管动态index.html文件.后端服务器使用从manifest.json上的数据中提取的模板系统填充样式表和脚本的链接(参见#5).这是可选的,因为你可以使用force-reload选项,如下面的评论,这不是一个很好的经验,但确实有效.

5)要发布新版本,我们将manifest.json发布到后端服务器.我们通过GraphQL端点执行此操作,但您可以手动将json文件放在某处.我们将其存储在数据库中并使用它来填充index.html,并使用它来验证使用文件哈希的文件(以验证我们的CDN没有被黑客入侵).

结果:立即更新并轻松跟踪和更改您的版本.我们发现它会立即在几乎所有用户的浏览器中推出新版本.

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

@H_403_8@ @H_403_8@

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...