浏览器缓存问题

问题描述

我正在基于Vue CLI构建的在线平台上，并且遇到浏览器缓存问题：

这是我的情况：

对于平台的每次修改，我都需要再次构建应用程序（npm run build）。之后，我进入测试分支并进行其他一些操作，然后再投入生产。在该过程结束时，旧文件将替换为捆绑软件中生成的新文件。

这里是我的问题：更新后我的客户访问平台时 通常不会加载，因为它们仍然在浏览器的缓存中保留了旧文件。每当 发生这种情况时，我建议他们清除浏览器的缓存，然后一切都回到 正常，但这很不方便。 有人可以给我关于如何防止这种情况发生的任何建议 每当我修改平台文件时？

解决方法

以下是vue-cli生成的项目的默认配置

webpack.prod.conf.js：

output: {
  path: config.build.assetsRoot,filename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},

您可以看到npm run build之后的文件名添加了像js/vendor.658937d99bd7b1009d76.js这样的哈希值，因此应该没有缓存问题。

然后可能是已编译的index.html文件在服务器端缓存，这需要修改服务器配置以不缓存index.html文件。

例如，nginx配置：

location / {
   root  html;
   add_header  Cache-Control no-store;
   index  index.html index.htm;
}

通过这种方式，浏览器在加载时将不会缓存index.html文件。