Vuejs 缓存问题，NPM Build 不会每次使用 Nginx 在生产环境中更改 SPA vuejs 应用程序的哈希值
我们有 vuejs 版本 2.6.40 应用程序使用 Laravel 作为后端 API 作为 SPA 运行。 当我们运行命令 npm run build 时，它每次进行生产构建时都会使用相同的哈希值将文件生成到 dist/* 中。
css/chunk-vendors.1a7cdba8.css
js/chunk-vendors.d2af6920.js
css/app.7ca97c3b.css
js/app.7c8415cc.js
这个相同的哈希值给浏览器缓存带来了一个巨大的问题，如果每次都有新的哈希值将解决 vue js 浏览器缓存问题。
我们的 vue.config.js 有以下 settgins
module.exports = {
lintOnSave: false,
productionSourceMap: false,
}
We have vuejs version 2.6.40 app running as SPA using Laravel as backend API.
When we run command npm run build it generates files into dist/* using the same HASH each time for production build.
css/chunk-vendors.1a7cdba8.css
js/chunk-vendors.d2af6920.js
css/app.7ca97c3b.css
js/app.7c8415cc.js
This same HASH creating a huge problem for browser cache, if this has new hash each time will solve vue js browser cache issue.
our vue.config.js has following settgins
module.exports = {
lintOnSave: false,
productionSourceMap: false,
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我一直在努力解决我认为的这个问题。然而，只有当资产的内容发生变化时才会生成新的哈希值。换句话说，仅重建到 dist 而不更改项目源文件不会更改所有哈希值。如果您更改源 css / js 文件，您会注意到哈希值（一些，不一定是全部）将会更改...
进一步阅读此处：https://webpack.js.org/guides/caching/
导致缓存问题的原因可能是您的 index.html 文件已被缓存，因此会使用以前的哈希值引用您的资源。在 index.html 的标头中设置 no-cache 应该会有所帮助！
I was struggling with what I though was this issue. However a new hash is only generated if the contents of an asset changes. In other words just rebuilding to dist without changes to your project source files won’t change all the hashes. If you change source css / js files you will notice that the hashes (some, not necessarily all) will change…
Further reading here: https://webpack.js.org/guides/caching/
What could be causing your caching issue is that your index.html file is cached, and hence referencing your assets with previous hashes. Setting no-cache in your headers for index.html should help with that!