Guide to naming Vite build JS and CSS bundles in Vue

As I work on building a SPA using Vite+Vue3 and JavaScript, I have encountered an issue when running npm run build. After making changes, the resulting .css and .js files have names that appear to be generated from a hash, which is not ideal. I would like to have fixed names for both files, such as code.js for JavaScript and styles.css for CSS. Despite reading through the Vite Documentation, I have not been able to find a solution to this problem.

Even after consulting the documentation for Vite+Vue, the answer still eludes me. I aim to specify the file names for JavaScript and CSS that are generated when I run npm run build.

When executing npm build, I encounter the following files in dist/assets/:

  • index.c14cf232.js
  • index.a6c8e3b2.css

The latter parts of these names keep changing whenever I update the app, which is not desirable. I seek consistency in the names, such as:

  • index.code.js
  • index.styles.js

Regardless of how many times I run npm build.

Could there be a Vite configuration setting that would allow me to achieve this?

javascriptvue.jsvuejs3vite

Answer №1

Surprisingly, this task is quite straightforward. The only roadblock I faced was the unfamiliar bundling terminology used in the Vite ecosystem. These options are part of Vite's RollUp configuration. Simply include the following options in your vite.config.js file:

export default defineConfig({
    plugins: [vue()],
    build: {
        rollupOptions: {
            output: {
                dir: '~/plugin/assets/',
                entryFileNames: 'plugin.js',
                assetFileNames: 'plugin.css',
                chunkFileNames: "chunk.js",
                manualChunks: undefined,
            }
        }
    }
})

With these settings, the build bundle will be generated in the ~/plugins/assets directory with matching names.

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

Display PickerIOS when a button is clicked in a React Native application

I am a beginner with the react framework and I'm trying to implement a PickerIOS component on button click. However, I'm having trouble understanding how to call other classes upon an event. I found this code snippet on the React Native site: v ...

javascriptjqueryreactjsreact-native

JQuery jqx validation is experiencing some issues

Utilizing jquery plugins and widgets from jqx for basic form validation in my ruby-on-rails application has proven to be very helpful. Here is a simple example of an HTML form: <form id="newForm"> <input type="text" id="name"/> < ...

javascriptjqueryvalidationwebforms

Mastering the correct usage of the submitHandler method in the jQuery validation plugin

Here is a snippet of documentation from the jQuery validation plugin: "Use submitHandler to execute some code before submitting the form, without triggering the validation again." submitHandler: function(form) { $.ajax({ type: 'POST&apos ...

javascriptjqueryajaxjquery-validate

Applying a value to all JSON objects within an array using AngularJS and JavaScript

Tale: I've developed an array ($scope.mainArray) that will be displayed in a <table> with <tr> elements using ng-repeat as shown below: +---+ | 1 | +---+ | 2 | +---+ | 3 | +---+ Each object contains an array which is presented within & ...

javascriptangularjs

Unlock hidden content with a single click using jQuery's click event

I have a question that seems simple, but I can't quite get the syntax right. My issue is with a group of stacked images. When I click on an image, I want it to move to the front and display the correct description above it. Currently, clicking on the ...

javascriptjqueryclickshowdisplay

Navigate through the pages by selecting from the drop down menu, but the drop down seems to be missing on the second page

Check out this link. I'm interested in exploring each page linked to an item in the dropdown menu at the top of the website. Recently started using selenium, here's what I've been working on: Start by opening the driver Navigate to the w ...

javascriptpythonseleniumselenium-webdriverweb-scraping

Unable to show the name of the chosen file

After customizing the input [type = file], I successfully transformed it into a button with a vibrant green background. Here is the code snippet that enabled this transformation: <style> #file { height:0px; opacity:0; } ...

javascripthtmlcss

During the installation of a package, npm encountered a require stack error with the code MODULE_NOT_FOUND

Whenever I attempt to install something using the npm install command, it throws an error saying "require stack" and "code MODULE_NOT_FOUND" C:\Users\dell>npm audit fix node:internal/modules/cjs/loader:1075 const err = new Error(message); ...

javascriptnode.jsnpmerror-handling

Unable to remove the most recently added Object at the beginning

I am currently working on a project to create a dynamic to-do list. Each task is represented as an object that generates the necessary HTML code and adds itself to a div container. The variable listItemCode holds all the required HTML code for each list it ...

javascriptjqueryhtmlcss

Utilizing two imports within the map() method

I have been considering the idea of incorporating two imports within map() in my React code. This is how my code looks: {this.state.dataExample.map(item => ( <ItemsSection nameSection={item.name} /> item.dat ...

javascriptarraysjsonreactjsnext.js

Guide to combining an Angular 2 application with a Django application

Currently, I have been working through the Tour of Heroes tutorial. The structure of my Django app can be simplified as shown below: apps/my_app/migrations/ apps/my_app/__init__.py apps/my_app/urls.py apps/my_app/views.py frontend_stuff/js/ javascript ...

javascriptdjangoangular

The output of jQuery('body').text() varies depending on the browser being used

Here is the setup of my HTML code: <html> <head> <title>Test</title> <script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript"> function initialize() { var ...

javascriptjqueryfirefoxgoogle-chromeopera

The animation functionality for Ionic Vue Router on iOS seems to be malfunctioning

I have recently set up a new Ionic Vue app using the tabs template and encountered an issue after switching the mode to ios - the routing animations disappeared. The animations work fine with md. This is what my index.html looks like: <!DOCTYPE html> ...

vue.jsionic-framework

What is the best way to include a JavaScript variable in an HTML image src tag?

Even though I know the answer to this question is out there somewhere, I just can't seem to find it (or maybe I'm not recognizing it when I see it!). As a beginner in jquery, please be patient with me. Dilemma: I have a collection of 20 images, ...

javascriptjqueryhtmlimagerandom

The event listener for the hardware back button in $ionicPlatform is being triggered repeatedly

Encountering a glitch with the back button being triggered multiple times. While I'm in the "messages" $state, everything functions normally when hitting the back button. var messageIsClosed = true; $ionicPlatform.onHardwareBackButton(function(even ...

javascriptangularjscordovaionic-framework

"Integrate a URL segment into the primary URL with the help of AngularJS or JavaScript

One interesting case involves a URL path that is structured in the following way. http://localhost:12534/urlpart1/urlpart2?querystring=140 The challenge here is to replace "urlpart2" with "urlpart3" using either javascript or AngularJS. One approach is t ...

javascriptangularjs

Adjusting font sizes in JavaScript causes the text to resize

Within my HTML pages, I am adjusting the font size using JavaScript code like this: "document.body.style.fontSize = 100/50/20" However, whenever the font size changes, the text content on the page moves up or down accordingly. This can be disorienting for ...

javascripthtmlcssdomuiwebview

SignalR's postback interrupts the functionality of jQuery actions

On my screen, I have a widget that updates data and changes its class based on server-side interactions. It also responds to mouse clicks. To notify multiple clients of updates simultaneously, I'm using SignalR. The problem arises when I wrap everythi ...

c#javascriptjqueryhtmlasp.net

Display all elements with a blank attribute using jQuery

I'm currently dealing with a list containing multiple hidden list items: <ul> <li rel=""> </li> ... </ul> My goal is to display only those list items that have an empty string as the value of the attribute rel. D ...

javascriptjquery

Activate tooltip by clicking outside of the dropdown menu

I am experiencing an issue with a tooltip and a dropdown menu. Whenever I interact with the dropdown by clicking outside of it or inside its contents, the tooltip content is triggered again. For example, when I hover over the button, the tooltip triggers ...

javascriptreactjsnext.jsshadcnuiradix-ui