如何在 SPA (react, vue) 中刷新？答案

【问题标题】：How to refresh in SPA (react, vue)?如何在 SPA (react, vue) 中刷新？
【发布时间】：2020-04-13 13:51:37
【问题描述】：

如果SPA项目中源代码或功能发生变化，必须重新部署到服务器上。

如果服务部署了，除非刷新，否则会继续加载缓存的js值。我该如何解决这个问题？

【问题讨论】：

您使用的是什么服务器。通常，服务器会在检测到更改后重建整个项目，因此这不应该成为问题。
这是预期行为，在用户不刷新页面之前，不会加载新的更改
您的具体设置是什么？这已经在 CRA 和 Vue CLI 中以答案描述的方式完成。
@Hadi Pawar 我用的是 nginx
@Estus Flask 我正在使用 CRA(create-react-app)。

标签： javascript reactjs vue.js single-page-application

【解决方案1】：

假设您所有的 SPA 代码都是两个文件：vendor.js 和 app.js。要在更新时错过缓存，通常要做的是计算内容的哈希并将其放在文件名中：vendor.<truncated md5 hash>.js 和app.<truncated md5 hash>.js。每次构建项目时（假设您至少更改了一行），它都会获得一个新的哈希值，因此会获得一个新的文件名，并且会丢失缓存。

【讨论】：

这没有回答问题。问题指出：“如果服务已部署，它将继续加载缓存的 js 值，除非 REFRESHED。我该如何解决这个问题？”您的答案需要刷新，然后是的，JS 的散列格式应该可以工作。但是，问题是如何在没有刷新的情况下刷新缓存？

【解决方案2】：

如果您使用过 webpack，在输出条目中只需指定文件名，如

output: { filename: '[name].[contenthash].js', path: '/' }

这将通过在文件内容更改时为输出文件创建新哈希来解决问题。

【讨论】：

即使捆绑了一个新的js文件，网页浏览器仍然会使用之前hash值的js进行操作。如何修复这部分的刷新？
这没有回答问题。我的评论与我为 Jonathan Rosa 所做的评论相同。