What is the best way to create a fresh revision with every build in Vue.js?

Currently, I am utilizing vue cli along with pwa (workbox).

Upon building the project, Vue automatically generates a file called: 

precache-manifest.882c44d211b70f8989278935.js
.

Within this file, there are entries for revision and url:

{
    "revision": "2332b61ff6f66ba9523b370a7f21196d",
    "url": "/index.html"
},

If I do not make any changes to the file, it retains the same revision.

My main query revolves around how I can compel it to generate a different revision every time I build the project?

javascriptvue.jsprogressive-web-appsworkboxworkbox-webpack-plugin

Answer №1

In order to make changes to the manifest, workbox@v5 may be necessary.

If you are using yarn, add a resolutions field to your package.json:

"resolutions": {                      
  "@vue/cli-plugin-pwa/workbox-webpack-plugin": "^5.0.0"
},

After adding the field, run yarn for installation. Next, in your vue.config.js, include:

module.exports = {                    
  pwa: {                                
    workboxOptions: {                     
      exclude: ['index.html'],            
      additionalManifestEntries:[           
        { url: '/index.html',revision: Date.now().toString() }
      ]
    } 
  }                                 
}

For more information, refer to:

If workbox@v5 is not suitable for your needs, it seems possible to modify the precache manifest after building :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passing boolean values to component attributes in Vue.js

I am attempting to create a straightforward input component using Vue, where if the condition IsPassword is true, the type will be set to "password," and if it is false, the type will be set to "text." I suspect there may be a syntax error causing a pars ...

javascriptvue.jscomponentsparameter-passing

Do I need to include the title, html, and head tags in a page that is being requested via ajax

I have a page called welcome.htm that is being loaded into another page using ajax. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh ...

javascriptajax

Can you explain the sequence of Vue component lifecycles?

In a scenario where I have a <router-view> displaying one component (A) and when navigating using a <router-link>, this component is replaced by another one (B). Each of these components has their own beforeCreate and beforeDestroy hooks. I as ...

vue.jsvuejs2

Deleting empty tags in an HTML h1 element with JavaScript

Is there a way to use JavaScript to remove empty h1 tags only? <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet</p> <h1></h1> <p>consectetur adipiscing elit.</p> <h1></h1> <p>Sed do ...

javascripthtml

Unable to establish a connection to the server while handling a jQuery Ajax error

I'm in the process of pinpointing an issue that occurs when submitting an Ajax request through jQuery and encountering a failed connection to the server. The scenario involves loading a page from the server, then deliberately disconnecting the network ...

javascriptjqueryajax

The CKEditor is having trouble properly opening code snippets

I have been using ckeditor 4.4 along with the code snippet plugin. Initially, when I create a document with a rich code snippet and save it, everything works perfectly fine. The source code for what is generated looks like this: <pre><code>&am ...

javascriptckeditorcode-snippets

What is the best way to trigger the Save as ..dialog by clicking on an image?

Below is the code snippet provided. When the link is clicked, a save as dialog should pop up. <a href="http://www.experts-exchange.com/xp/images/newNavLogo.png" target="_new"> <img src="http://www.experts-exchange.com/xp/images/newNavLogo.png" a ...

javascriptjqueryhtml

What is the method for shifting content as the window is resized to ensure it remains in its original position?

My page features a grid with three div elements. Each div is the size of the viewport, resulting in only one div being visible at a time, while the other two remain outside the view. This makes the grid three times larger than the viewport. When resizing ...

javascriptjqueryhtmlcss

The box shadow feature does not function properly when the position is set to sticky

Applying position sticky to th and td in the example below seems to be causing issues with the box shadow not working. Can anyone provide insights on why this is happening? <div class="overflow-x-auto lg:overflow-visible"> <div> <t ...

cssvue.jsbootstrap-4nuxt.jstailwind-css

Updating the select input value in Vuetify using the prepend-item event

Is there a way to update the select value in a Vuetify select by clicking on a specific item that is prepended? I'm having an issue where the model doesn't update the item-text in the select input. <v-select :items="loadedTasks" v- ...

vue.jsvue-componentvuetify.js

Node JS does not receive a response from JQuery Ajax

I have developed a form on the client side which includes: <html> <body> <script> $(document).ready(function() { $.ajax({ url: "Search.html", type: "POST", dataType : "json", s ...

javascriptjqueryajaxnode.js

Vue element fails to appear on the screen

As a newcomer to Vue.js and web development in general, I decided to dive into the vuejs guide. Something puzzled me - when creating a vue component using Vue.component(NameOfComponent, {...}) and inserting it into my HTML as <NameOfComponent></ ...

javascriptvue.jsvuejs2vue-component

Using EJS to Render a Function Expression?

Has anyone been able to successfully render a function call in express using EJS? Here's what I've tried so far: res.render("page", { test: test() }); Can someone confirm if this is possible, or provide guidance on how to call a function fr ...

javascriptnode.jsexpressejsserver-side-rendering

Check each field in a loop and if validation for any field fails, then return false using jQuery

Having trouble resetting the flag variables when it comes to form validations. I seem to be missing something crucial. I'm dealing with a form that has multiple text fields. I want to validate each field on blur and prevent form submission if any val ...

javascriptjquery

Customer Notification System Malfunctioning on Front End

I am currently experimenting with MeteorJS technology and attempting to use alerts for success or failure notifications when making a meteor call. However, I've encountered an issue where the alerts are not functioning as expected. T ...

javascriptmeteor

create a JavaScript array variable for posting items

My goal is to use this javascript to make four posts for the 'var msg' array. However, it currently posts 'encodeURIComponent(msg[i])' four times instead. How can I resolve this issue? var msg = ['one', 'two& ...

javascriptajax

Creating a link using curly braces {{ }} in VUE js

I need assistance in creating links to different pages using data in curly brackets {{ }}, I am having trouble figuring out the correct way to implement them. <div id="app"> <div v-for="data in categorie"> &l ...

javascriptvue.js

Indicate the node middleware without relying on the port number

My website is hosted at mywebsite.com and I am using node and express for middleware services, pointing to mysite.com:3011/api. The website is hosted statically on Ubuntu 16 (Linux) and the middleware is run separately using pm2 (node server). I want to b ...

javascriptnode.jsexpress

When the Jqueryui dialog is closed, it effectively terminates the current JavaScript thread

Hello there, I'm currently facing an issue with closing my jQuery dialog box. The situation involves a comet connection that sends messages to my browser. My goal is to perform certain actions upon receiving a message, close the dialog, and then conti ...

javascriptjqueryhtmljquery-ui

Utilizing the Twitter API 1.1 to retrieve a list of tweets

As I work on updating my CMS component, I am incorporating integration with the Twitter API to fetch and showcase a list of tweets related to a user or search query. I have chosen to utilize the Twitter Restful API v1.1 as the 1.0 version is set to be disc ...

javascripttwitteroauth