如何缓存部署在 nginx 中的 vue 应用程序？答案

【问题标题】：How do i cache bust my vue apps deployed in nginx?如何缓存部署在 nginx 中的 vue 应用程序？
【发布时间】：2019-12-04 06:13:33
【问题描述】：

美好的一天。

我的 nginx 服务器中部署了一些 vue 应用程序，有时，当我更新我的应用程序时，由于缓存，用户似乎无法访问新版本。

如何缓存我的 vue 应用程序，而无需更改我的应用程序中的每个文件和组件引用的名称？是否有一个易于使用的 npm 插件我可以添加到我的项目中，或者在我运行 npm run build 以创建他们的 dist 文件夹之前我可以做些什么？我可以在不必修改我的 webpack 或 nginx 配置文件的情况下做任何事情吗？

【问题讨论】：

VueJS/browser caching production builds的可能重复
我的问题实际上有点不同，因为我不想弄乱我的 webpack 和 nginx 配置文件。我会相应地编辑问题。
您是否使用 CDN，例如 cloudflare？除非您也以编程方式或从控制台仪表板清除其缓存，否则这将使您实现目标的任何尝试无效。如果您不使用 CDN，我看到的唯一解决方案是，在每次部署时，将构建文件复制到新目录下，尽管这意味着会弄乱您的 nginx.conf 文件

标签： vue.js nginx caching npm

【解决方案1】：

假设这与 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)
  },
)

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

【讨论】：