CODEWITHSUNDEEP
vue.jsnginxwebpackcachingvue-cli
BigKamil5
BigKamil5

Reputation: 305

Vue-cli production build - browser cache problem?

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?

Upvotes: 6

Views: 3151

Answers (2)

ssten
ssten

Reputation: 2049

A possible problem could be that the browser is caching the index.html file.

Try to disable cache for index.html like this:

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

Or if you are using a .htaccess file, add this code to the bottom of the file:

<Files index.html>
FileETag None
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</Files>

Upvotes: 0

bragboy
bragboy

Reputation: 35542

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

Upvotes: 1

Related Questions