CODEWITHSUNDEEP
webvue.jsdeploymentnuxt.js
chars
chars

Reputation: 71

Is there a way to control the nuxt cache when deploying?

When using Nuxt, I ask questions.

When I distributed the site I built, the cache problem caused it to malfunction. There are two cases below. Is there any way to solve them?

  1. If built, the file names of js and css will be renamed to hash values, but it was not reflected by viewing old cache in browser.

  2. Create applications using vue-native webview The webview in the application looked up the old cache. To apply the changed js, css, how do I remove the cache from the past?

Upvotes: 7

Views: 7304

Answers (2)

Arian Fm
Arian Fm

Reputation: 387

If you used run generate for the project, then you should go to dist/index.html and set version to all script tag source like this:

before:

<link rel="preload" href="/_nuxt/d88504d.js" as="script">

after:

<link rel="preload" href="/_nuxt/d88504d.js?v=1.1" as="script">

but if u used run build for your project It gets a little more complicated. in that case u should go to :

.nuxt/dist/server

then if your project is ssr go to

index.ssr.html

and if your project is spa go to

index.spa.html

then you should change script source version like this:

before:

<script src="/_nuxt/9df4ed5.js"></script>

after:

<script src="/_nuxt/9df4ed5.js?v=1.1"></script>

ps: v=1.1 is a random number. you can use whatever you want ! And after any run build or generate u should change this number for forcing the browser to reload the scripts.

Upvotes: 1

Abdullah Zafar
Abdullah Zafar

Reputation: 187

https://github.com/nuxt/nuxt.js/issues/4764#issuecomment-713469389 Implementation of this one:

Add a plugin filename route.client.js
Include in nuxt.config.json

function getClientAppVersion() {
  return localStorage.getItem('APP_VERSION') ?? 0
}

function setClientAppVersion(version) {
 return localStorage.setItem('APP_VERSION', version)
}

export default ({ app }) => {
app.router.afterEach((to, from) => {
fetch("/version.json").then((serverPromise) => 
 serverPromise.json().then((response) => {
  const latestVersion = response.version
  const clientStoredVersion = getClientAppVersion()

  if (clientStoredVersion != latestVersion) {
    window.location.reload(true)
    setClientAppVersion(latestVersion)
  }
  else return
 }))
})}

Add version.jon file

{
 "version": "9.1"
}

Upvotes: 3

Related Questions