浏览器缓存问题

Question

我正在开发一个基于Vue CLI的在线平台，但是我遇到了浏览器缓存的问题：

这是我的情况：

每次对平台进行修改后，我需要重新构建应用程序（npm run build）。之后，我将其推送到测试分支并执行其他操作，然后再进入生产环境。在此过程的最后，旧文件被新生成的绑定文件所替换。

问题来了：当我的客户在更新后访问平台时，由于他们的浏览器缓存中仍然保存着旧文件，因此经常无法加载。每当发生这种情况时，我都会建议他们清除浏览器缓存，然后一切就恢复正常了，但这非常不方便。请问有什么建议可以防止每次修改平台文件时出现这种情况吗？

- Tom Lima

---

你的网站托管在哪里？ - niclas_4

我的应用程序托管在AWS上。 - Tom Lima

静态或SSR，你使用服务工作者吗？ - niclas_4

这两个概念（ssr和service worker）我不太了解，也没有实现过。我所做的基本上是在EC2上租用一台机器来托管应用程序，并使用RDS作为数据库。我只是将生成的文件复制到Apache目录（/var/www/html/myapplication）。https://soniaserranoexpert.sabiorealm.com/ 这正是我的客户遇到问题的地方。 - Tom Lima

每个客户都有自己的子域名和在Apache中的独立目录。因此，当我更新您的平台时，我将捆绑包中生成的所有新文件替换到您的目录中，这种情况下是/var/www/html/soniaserranoexpert。 - Tom Lima

Answer 1

以下是由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文件。

- sugars

---

啊，明白了！我真的一直在思考这个问题是客户端缓存还是服务器端缓存。这真的很有道理！我会尝试对Apache进行相同的配置:) 谢谢！ - Tom Lima

nginx配置：location '/'将匹配所有请求，包括index.html中引用的'js, css'文件。 - huan feng

Answer 2

虽然这个问题已经有了一个被接受的答案，但我还是想再添加一个答案：

关于index.html引用的资源，例如（*.js, *.css） 同意接受的答案，我们只需要给这些文件添加哈希值。

关于index.html本身，我认为我们应该更新nginx配置如下：

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

我们只为index.html添加了no cache头部，而不是所有的请求。

- huan feng