浏览器缓存问题

Question

我在一个基于 Vue CLI 的在线平台上工作，我遇到了浏览器缓存问题：

这是我的场景：

对于我对平台所做的每一次修改，我都需要再次构建我的应用程序 (npm 运行 build)。之后我推送到测试分支并在投入生产之前做一些其他操作。在该过程结束时，旧文件将替换为捆绑包中生成的新文件。

And here comes my problem: when my customers go to access the platform after an update it often doesn't load because they still have the old files in their browser's cache. Whenever this happens, I advise them to clear their browser's cache and everything goes back to normal, but this is quite inconvenient. could someone give me any suggestion of what i could do to prevent this from happening whenever i modify my platform files?

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这样的hash值，应该不会有缓存问题

那么可能是编译后的index.html文件缓存在服务器端，需要修改服务器配置不缓存index.html文件

例如nginx配置：

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

这样浏览器在加载时不会缓存index.html文件。

浏览器缓存问题

Browser cache issues

browser-cache

vue.js

vue-cli