What is the best way to structure files within the css and js folders after running the build command in Vue-cli?

Vue-cli typically generates files in the following structure:

- dist
-- demo.html
-- style.css
-- file.commom.js
-- file.commom.js.map
-- file.umd.js
-- file.umd.js.map
-- file.umd.min.js
-- file.umd.min.js.map

However, I prefer to organize them this way:

- dist
-- demo.html
-- css
--- style.css
-- js
--- file.commom.js
--- file.commom.js.map
--- file.umd.js
--- file.umd.js.map
--- file.umd.min.js
--- file.umd.min.js.map

Extra question: Do we really need to use common and umd as part of the filenames? From what I observed in the node_modules directory, none of the projects seem to have these specific names.

javascriptvue.jsvue-cli-4

Answer №1

To customize your webpack configuration, make changes to the settings.

Refer to this relevant discussion: https://github.com/vuejs/vue-cli/issues/1967

module.exports = {
    chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => Object.assign({}, options, { name: '[name].[ext]' }));
  },
  css: {
    extract: {
      filename: '[name].css',
      chunkFilename: '[name].css',
    },
  },
  configureWebpack: {
    output: {
      filename: '[name].js',
      chunkFilename: '[name].js',
    }
  }
};

The provided code snippet can be updated by modifying the keys for chunkFilname and filename to include a specific folder path. For example, use 'javascript/[name].js'

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

The plugin function cannot be executed unless inside the document.ready event

Utilizing jquery and JSF to construct the pages of my application includes binding functions after every ajax request, such as masks and form messages. However, I am encountering an issue where I cannot access the plugins outside of $(function(). (functio ...

javascriptjqueryjsf

Vue.js $scopedSlots do not function with Vue object

In the process of developing a Vue component that will be released once completed, I am wrapping Clusterize.js (note that the vue-clusterize component is only compatible with v1.x). The goal is to efficiently render a large list of items using Vue, particu ...

javascriptvue.jsvuejs2clusterize

Mobile display exhibiting glitches in animation performance

I have implemented an animation in the provided code snippet. const logo = document.querySelector('.logo'); const buttons = document.querySelectorAll('.loadclass'); const html = document.querySelector('html') const cornerme ...

javascripthtmlcss

Error messages encountered following the latest update to the subsequent project

Recently, I upgraded a Next project from version 12 to 14, and now I'm encountering numerous import errors when attempting to run the project locally. There are too many errors to list completely, but here are a few examples: Import trace for requeste ...

javascriptreactjsnode.jstypescriptnext.js

Tips for resolving the error "Encountered duplicate registration of views named RNGestureHandlerButton" in ReactNative

Seeking guidance on implementing a Swipe-to-Delete feature in my App, I manually installed the react-native-gesture-handler. This action triggered an error message which persists even after attempting to uninstall the gesture handler. Any suggestions or so ...

javascriptreactjsnpm

Leveraging the navigator geolocation feature in tandem with reactors

Struggling to save geolocation variables position.coords.lat/long in a global scope. Check out this code: var GeoLoco = React.createClass({ lat: 0, long: 0, handler: function(position) { ...

javascriptreactjsgeolocation

Inserting items into an array entity

I am attempting to insert objects into an existing array only if a certain condition is met. Let me share the code snippet with you: RequestObj = [{ "parent1": { "ob1": value, "ob2": { "key1": value, "key2": va ...

javascriptjqueryangulartypescript

Mastering the utilization of componentDidMount and componentDidUpdate within React.js: a comprehensive guide

I am facing an issue. I need to find an index based on a URL. All the relevant information is passed to the components correctly, but I encounter an error after loading: Cannot read property 'indexOf' of undefined The JSON data is being transmi ...

javascriptjsonreactjsreact-propsindexof

Merge JSON objects into an array

Is there a way to merge JSON objects when the initial object is: { "total": "2" } And the second one is: [ "player1": { "score": "100", "ping": "50" }, "player2": { "score": "100", "ping": "50" ...

javascriptjsonnode.jsconcatenation

Error: Vuex commit fails due to JSON circular structure issue

Using Vue.js along with the vuex store, I make an API call to validate an item, which returns arrays of errors and warnings. Below is my vuex action : export function validateitemReview ({ commit, dispatch, state }, { reviewId, type, itemreviewData }) { ...

javascriptvue.jsvuejs2vuex

Converting an Array with Key-Value pairs to a JSON object using JavaScript

After using JSON.stringify() on an array in JavaScript, the resulting data appears as follows: [ { "typeOfLoan":"Home" }, { "typeOfResidency":"Primary" }, { "downPayment":"5%" }, { "stage":"Just Looki ...

javascriptjson

Generating a download link with an expiration feature in node.js or express for both frontend and backend operations

Hello everyone, I'm a beginner here and have recently started working with node.js and express.js. I am looking to implement a download link on my website that expires after a certain time, but I've been struggling with the code for about a week ...

javascriptnode.jsexpress

Is it possible to use a Backbone Model for an unconventional HTTP POST request that isn't

After going through the documentation at and , I tried to make an HTTP POST request to fetch some JSON data for my model. However, due to the services not being RESTful, I ended up using a POST request instead of a GET request. The code snippet I have co ...

javascriptajaxjsonbackbone.js

Encase a group of child elements within a parent container using

Currently, I am able to wrap an entire li-element in an ordered list with a link: $(e).wrap('<a href="#" onclick="window.open(\'/xyz/\');return false;"></a>'); This is the HTML construct: <li class=""> ...

javascriptjqueryhtmlcss

Step-by-step guide: Uploading files with Ajax in Codeigniter

I am facing an issue with updating data and uploading an image when editing a row in my grid. Although the data is successfully updated, I am encountering difficulties in saving the image file to a folder. Here is what I have tried: While using AJAX, I ...

javascriptphpjqueryajaxcodeigniter

When the Enter key is pressed while in an input element within a child component, it triggers a method that was originally defined in the parent component as well

In my application, there is a parent component that allows users to select skills from a list of options. Additionally, there is a child component where users have the ability to add their own skill if it is not available in the parent component. The chal ...

javascriptvue.jsvue-componentvue-events

Transform specific data binding values into JSON format using Knockout.js

Just dipping my toes into the world of knockoutjs, I've got this viewmodel set up: var Testing = function(){ this.Username = ko.observable(""); this.Password = ko.observable(""); this.email = ko.observable(""); } I'm tasked with ...

javascriptjsonknockout.js

What is the best way to incorporate modal window parameters into this code snippet?

JavaScript function: function loadBlockEditor(block, username) { var blockInfo = $.ajax({ url: "in/GameElement/BlockEditor.php", type: "GET", data: 'block=' + block + '&nick=' + username, dataType: "html" }); b ...

javascriptjquerycss

Issue with vue transition not functioning as expected when hiding a div

I'm having an issue with a simple transition that toggles the visibility of a div text. The transition only seems to work when hiding the text, but not when showing it. Here's my code: <template> <div> <transition name="fa ...

vue.jsvuejs2

What methods can I use to adjust link distance while using the 3d-force-graph tool?

Exploring the capabilities of the 3D Force Graph from this repository has been an interesting journey for me. I am currently seeking ways to adjust the bond strength between nodes. I am specifically looking to modify either the link width or length, but ...

javascriptd3.jsthree.jsd3-force-directed