Vue-cli production build - browser cache problem?

Question

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?

Trace the links for js files in main html file - the hash-es are updated? The links for you clients also have updated hashes? — Kamil Kiełczewski
– Kamil Kiełczewski, Commented Oct 29, 2019 at 9:34
I'm also facing the same issue, it updates to new version only when you reload the browser instead of refresh, or close current tab and open new browser tab. — chans
– chans, Commented Oct 29, 2019 at 9:40
Is your apps configured as PWAs? I'd bet this is a problem related to service worker offline caching — vhoyer
– vhoyer, Commented Apr 2, 2020 at 14:05
Anyway, if you're having problem with this, to see if the problem is with the serviceworker go to (chrome) devtools > Application > Service Workers > [ ] Bypass for network, check that box, make a deploy and reload the page, this should do the trick — vhoyer
– vhoyer, Commented Apr 3, 2020 at 13:27

bragboy · Accepted Answer · 2020-07-02 13:56:25Z

1

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

answered Jul 2, 2020 at 13:56

bragboy

35.7k30 gold badges116 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ssten · Accepted Answer · 2020-11-17 17:54:27Z

0

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>

edited Nov 17, 2020 at 17:54

answered Nov 17, 2020 at 17:42

ssten

2,0581 gold badge19 silver badges31 bronze badges

Collectives™ on Stack Overflow

Vue-cli production build - browser cache problem?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related