Prevent certain output files from caching in Vue CLI 3 to avoid busting the cache

I am currently developing a chrome extension using vue cli 3 and have successfully implemented the basics. However, I would like to streamline my file structure by including my content and background javascript files in the build process instead of manually moving them to the dist folder. This will also allow me to use import/export functions effectively.

I managed to add these files as new "pages" in the vue config, and they are being built and placed in the dist folder without any issues, even without the html template file.

The challenge arises when the cache busting string is appended to their filenames, making it difficult for me to reference them in the extension manifest. For instance, 'background.js' becomes 'background.d8f9c902.js'.

Is there a way to configure the vue config to exclude certain "pages" from receiving the cache busting treatment? Unfortunately, the documentation doesn't provide any information on this specific parameter.

Thank you in advance!

javascriptvue.jsgoogle-chrome-extensionvue-clivue-cli-3

Answer №1

To disable filename hashing for all files, you can refer to the following link: https://cli.vuejs.org/config/#filenamehashing

I have successfully implemented this solution using the vue.config.js configuration below:

// vue.config.js
module.exports = {
  lintOnSave: true,
  filenameHashing: false
}

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

Is it possible to adjust the width of a parent element based on the number of child

In this particular example, I have structured a header with a logo-container positioned on the left side, a menu in the center, and a button on the right. The menu consists of 5 top-level items and 2 sub-menus. <div class="container"> <div cla ...

javascriptjqueryhtmlcss

Multiple occurrences of the cookie found in the document.cookie

My client is using IE9 and the server is asp.net (specifically a SharePoint application page). Within the Page_Load method of a page, I implemented the following code: Response.Cookies["XXXXX"].Value = tabtitles.IndexOf(Request.Params["tab"]).ToString(); ...

javascript.netcookiesinternet-explorer-9

The issue with the callback function not being triggered within a self-repeating loop

As I work on creating a user-script to incorporate a trailer video into a website, I encountered an issue with the callback function in my script. The goal is to filter the real source of the video from different URL formats, but for some reason, the callb ...

javascript

What causes a reactive variable to change even when it is not connected to v-model?

My experience with the composition API has been relatively smooth so far, even though I'm fairly new to it. I have a situation where I am making an Axios call and receiving some data; const transaction = ref({}); let pbl = reactive({}); const getPay ...

vue.jsvuejs2vuejs3vue-composition-api

How can I use jQuery to fix the positioning of a right-side div?

How can I make the right hand side div fixed within row two, so that it stays in place when scrolling down the page and moves up when reaching the footer area? Here is an example of my code: I would like to keep the col-md-4 class fixed when it reaches t ...

javascriptjquery

Personalize the appearance of dynamically generated DIV elements

This script generates a random number of squares (ranging from 20 to 40) and adds text to each square. The script then calculates the width of each square so that they all fit in a single row. Here is the code snippet: var quantity = Math.floor(Math.ran ...

javascriptcss

Clear the input field value when the onClick event occurs, and retain the value if not changed

When I initially set a default value in the input field, it is important that this value is removed when clicked inside the field. However, if the inserted value is left blank and the mouse cursor moves away from the field, the default value must be restor ...

javascriptjqueryevents

Canceling pending asynchronous actions in React/Redux: A step-by-step guide

Imagine the scenario where a user navigates to a page and two asynchronous Redux actions are dispatched simultaneously to fetch related sets of data. If one of these fetches fails, the component will detect it and render an error component on the next cycl ...

javascriptajaxasynchronousreactjsredux

Efficiently process and handle the responses from Promise.all for every API call, then save the retrieved data

Currently, I am passing three API calls to Promise.all. Each API call requires a separate error handler and data storage in its own corresponding object. If I pass test4 to Promise.all, how can I automatically generate its own error and store the data in ...

javascriptreactjstypescriptasync-awaites6-promise

Adjusting the Pace of a CSS Marquee

My CSS marquee effect is working perfectly, but I am having trouble with the speed. The issue arises when the text length varies - shorter text takes longer to scroll while longer text scrolls quickly. This inconsistency is due to the animation duration an ...

javascriptjqueryhtmlcss

Invoke the REST API and save the compressed file onto the local machine

This is the code snippet I currently have: jQuery.ajax({ type: "GET", url: "http://localhost:8081/myservicethatcontainsazipfile", contentType:'application/zip', success: function (response) { console.log("Successful ...

javascriptjqueryajax

Ways to exhibit API information leveraging the prowess of Ajax

I am looking for a way to utilize the API in order to present data in an organized manner, similar to the following example: Job Title: Agricultural and Related Trades Percentage of Occupancies in Area: 15.41% Unfortunately, my attempt to showcase the d ...

javascriptjqueryhtmlajaxapi

Managing browser navigation within a web application

I am currently developing a web-based application for internal use in the company I work for. The application is quite intricate, featuring numerous forms that will enable users to both view and input data, which will then be stored in a database upon savi ...

c#javascriptasp.net

Promise of bluebirds when working with an array of functions

I am working with an array of functions that are stored in a JSON file: "functionArray" : ["task1()", "task2()", ... , "taskN()"] My objective is to call these tasks sequentially, ensuring that task2 function is only executed after task1 function complete ...

javascriptarraysnode.jspromisebluebird

Single-use binding format

I am a beginner with Angular and I have some doubts about the syntax used in Angular. In AngularJS, we can achieve one-time binding like this: <p>{{::myVar}}</p> In Angular, I know we can do it differently. <p [innerText]="myVar"></ ...

javascriptangular

Encountering an error in Vue.js where a "cannot read property of undefined" message is displayed when attempting to use v

While attempting to use v-model on an array item's property, I encountered the error message "[Vue warn]: Error in render function: 'TypeError: Cannot read property 'viewFood' of undefined' when loading the page. This resulted in a ...

javascriptvue.jsvuejs2

Strangely, the quirks of the .hover() function on iOS

I'm finding it puzzling why .hover() is acting differently on iOS. On my desktop, I have a portfolio gallery with images that link to individual pages of my work. When hovering over an image, it slightly fades and a title animates in. However, when I ...

javascriptjqueryios

Preventing commits when encountering build or lint errors

Every git repository contains git hooks within the .git/hooks directory. I have included a npm run lint command in the pre-commit git hook. However, I am unable to prevent the commit if npm run lint returns an error. ...

javascriptgitnpmbuildhook

JavaScript does not display checkbox values

I am currently testing whether checkbox values appear on the client side. When I execute the code, the alert is not showing anything. I would greatly appreciate any assistance, thank you. <div> <label name="finishing"class=" ...

javascripthtmljquery

Issues with NodeJs Express routes execution

After testing, I found that only the default route "/" is working in my code. Many similar issues involve routers being mounted to paths like "/auth" or "/user". Even when I tested the default router mounted to "/", it still isn't functioning properly ...

javascriptnode.jsexpressroutes