Menu
We are building e-commerce, we're using vue on front, and we decided it's the best to follow vue team recommendations, and start new project with vue-cli.
Our problem appears when we are trying to deliver new version to our clients. We are building new application, new files in dist/ folder appears, with new hashes in the name... aaanddd clients still has old version.
That's actually the weirdest part, that browser is somehow caching our code, despite of new hashes O.o
Do anybody had similar problem? And any idea how to solve this?
709
This is not about service workers or PWA and the caching headaches that come along with it. The problem that we faced is with more of a vanilla Vue JS front end, not able to refresh itself whenever a new deployment happens. Let me try to explain it in a more lucid way.
This is happening because our browsers are smart enough to cache files that will be potentially useful in the future. Caching is a process of storing commonly-used data in a quick to access memory so it can be used immediately after its requested.
VueJS PWA: Cache Busting. Building a PWA has become a lot easier… | by Gerard Lamusse | Vue.js Developers | Medium Building a PWA has become a lot easier with the help of plugins and libraries such as @vue/cli-plugin-pwa however, though they set up a service-worker and manifest file they don’t handle updates so well.
but Cache-Control: no-cache it is in responses to requests. When you do a build, Vue CLI will generate a file called index.html. It’ll be in your dist folder. Open it up and have a look. It should look like the one you posted earlier but with a few modifications, including the hashed asset paths.
Assuming this is nothing to with service worker/PWA, the solution could be implemented by returning the front end version by letting the server return the current version of the Vue App everytime.
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)
},
)
Full Article here: https://blog.francium.tech/vue-js-cache-not-getting-cleared-in-production-on-deploy-656fcc5a85fe
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
