Vue build results in misplaced Js files

I’m currently facing an issue with two similar projects I am working on. Both projects use the same base codes built upon the package/vueConfig files. However, when I build one of the projects, a number of js files are generated outside the designated js folder. This is a problem that I need to address and rectify.

https://i.sstatic.net/wgGMs.png

Despite looking into solutions such as this one and consulting the documentation, I am still encountering the same output.

Below is the script section of my package file:

"scripts": {
"serve:vlox": "env APP_TYPE=vloxEditor vue-cli-service serve vloxEditor/src/main.js",
"build:vlox": "env APP_TYPE=vloxEditor vue-cli-service build vloxEditor/src/main.js",
"serve:res": "env APP_TYPE=resourceEditor vue-cli-service serve resourceEditor/src/main.js",
"build:res": "env APP_TYPE=resourceEditor vue-cli-service build resourceEditor/src/main.js"
},

And here is the content of my vue.config file:

var fs = require('fs');

const path = require('path')

const appDir = process.env.APP_TYPE;

module.exports = {
  outputDir: path.resolve(__dirname, `${appDir}/dist`),
  publicPath: `./${appDir}-assets`,
  chainWebpack: config => {
    config.resolve.alias.set('@I', path.resolve(__dirname, '../interfaces'))
    config.resolve.alias.set('@shared', path.resolve(__dirname, './shared'))
    config.plugin("html").tap(args => {
      args[0].template = path.resolve(__dirname, `${appDir}/index.html`)
      return args
    })
  },
  devServer: {
    "port": 9090,
    "https": {
      "key": fs.readFileSync('../../vue-res/certs/ssl.key'),
      "cert": fs.readFileSync('../../vue-res/certs/ssl.crt')
    },
    proxy: {
      '^/vlox': {
        target: 'https://172.25.37.144',
        changeOrigin: true
      },
    }
  }
}

The overall structure of my project looks like this:

https://i.sstatic.net/I2zpI.png

Answer №1

The problem stemmed from the way ace internally loads its components, causing clutter in the main folder. Fortunately, stumbling upon this and this provided the necessary insight.

To address this issue, I implemented the following changes in vue.config.js:

var fs = require('fs');
const webpack = require('webpack')
const path = require('path')
const appDir = process.env.APP_TYPE;

module.exports = {
  outputDir: path.resolve(__dirname, `${appDir}/dist`),
  configureWebpack: {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(/^file-loader\?esModule=false!(.*)/, (res) => {
        res.request = res.request.replace(/^file-loader\?esModule=false!/, 'file-loader?esModule=false&outputPath=assets/js/ace-editor-modes!')
      }),
    ],
  },
  chainWebpack: config => {
    config.resolve.alias.set('@I', path.resolve(__dirname, '../interfaces'))
    config.resolve.alias.set('@shared', path.resolve(__dirname, './shared'))
    config.plugin("html").tap(args => {
      args[0].template = path.resolve(__dirname, `${appDir}/index.html`)
      return args
    })
  },
  devServer: {
    "port": 9090,
    "https": {
      "key": fs.readFileSync('../../vue-res/certs/ssl.key'),
      "cert": fs.readFileSync('../../vue-res/certs/ssl.crt')
    },
    proxy: {
      '^/vlox': {
        target: 'https://172.25.42.163',
        changeOrigin: true
      },
    }
  }
}

With these adjustments, the ace-related files are now neatly organized within their own dedicated folder.

https://i.sstatic.net/L4PDf.png

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

Encasing event handler callback within Observable pattern

I am currently exploring how to wrap an event callback from a library to an RxJS Observable in a unique way. This library I am working with sets up handlers for events like so: const someHandler = (args) => {}; const resultCallback = (result) => {} ...

The clash between React Inline styles and Client CSS can lead to conflicts in styling

Our application needs to be loaded into the client's page, which is built using React. We are implementing React Inline Styles by defining styles as objects. However, we have encountered an issue where any CSS specified by the client using tag attribu ...

Npm Authentication sometimes experiences issues functioning properly within Azure DevOps pipelines

There is a perplexing issue that I can't quite wrap my head around... We utilize a private registry in Azure Artifacts to distribute private npm packages. My Azure Pipeline uses the npmAuthenticate Task for authentication against this feed, with the ...

What could be the reason for the gtag event not showing up in Google Analytics?

Here is an example of my script: <html> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-1"></script> <script> wi ...

Ways to resolve the issue of the experimental syntax 'jsx' not being enabled

I encountered an issue while trying to implement react-fancybox and received an error. https://i.sstatic.net/vgFha.png To resolve the error, I executed the following commands: npm install --save-dev @babel/preset-react, npm install --save-dev @babel/plugi ...

Loading jQuery via JavaScript in the head section of the HTML document

I'm currently developing an application using jQuery and jQuery Mobile. I have a script in the head section that dynamically loads both libraries. However, my body contains a script that relies on jQuery ($) and is unable to access it because it loads ...

Increase the size of the textarea when it is clicked on and revert back to its original size when it

My question revolves around a text area that I am trying to manipulate through jQuery. The desired functionality is to increase the height of the text area whenever someone clicks on it, and decrease the height when clicking anywhere else on the screen. & ...

error is not defined in the onsuccess function of the ajax.beginform partial view

Currently, I am working on an MVC5 project where a View is calling a Partial View. Within the Partial View, there is an Ajax.BeginForm that triggers a function on OnSuccess. However, during execution, I encounter an error stating that the function cannot ...

How can one restrict the display of fields in the Meteor aldeed tabular package?

How can I restrict certain data from being displayed in an aldeed tabular datatable? For instance, if my collection includes attributes A, B, C, D and attribute C contains sensitive information that should not be published, is there a way to prevent it fro ...

Is it possible for web browsers to accommodate various HTML5 pattern regexp functionalities?

A basic regular expression pattern was implemented in a payment form on our website for customers: <input type="text" pattern="(|\$)[0-9]*(|\.[0-9]{2})" title="Please enter a valid number in the amount field" required> This pattern ...

The functionality for accessing objects in Chrome Developer Tools is not functioning properly

Every time I attempt to access an object in Chrome Developer Tools, I encounter the following error message: VM4939:1 Uncaught TypeError: Cannot read property 'cells' of undefined at :1:13 Here is my code: <head> <script> ...

AngularJS - Oops! Looks like we encountered an error: [$injector:modulerr]

I have a client-server application and I am facing an issue with this error message: "Uncaught Error: [$injector:modulerr]". Despite searching for solutions, none of them seem to be fixing the problem. Here is my client-side code: angular.module('m ...

Strengthening the vulnerability of open redirects in JavaScript

let input=document.getElementById("example").value; let newUrl= "http://localhost/app/default.aspx?example="+input; Window.showModalDialog(newUrl); I've noticed that the showModalDialog method may result in a potential open redirect vulnerability. Is ...

Using Firebase with Arrays in Javascript

Currently, my team and I are working on a project using Firebase with Vue.js as the framework. We've come across a challenge regarding creating, updating, and deleting elements in a Firebase cloud document. For instance, within our 'people&apos ...

iOS & Safari IntersectionObserver: A seamless navigation experience for Apple device users

I have a goal to dynamically change the position of a video element when a user scrolls to that specific section. I am utilizing the Intersection Observer API as I need to manage page scrolling within an AdForm Banner/iFrame context. Below is the snippet ...

Using Reactjs to Send Emails

Trying to incorporate the SmptJs API for email sending using JavaScript has been quite successful in a simple HTML setup. However, I am facing challenges when attempting to integrate it into a ReactJs component! The API documentation and link can be found ...

How can I update an Angular Datatable to display new JSON data?

I have a Datatable controller set up as shown below: //Module / Módulo var angularDataTables = angular.module("angularDataTables", ['datatables', 'datatables.buttons' , 'datatables.bootstrap']); //Controller / Controlador ...

Navigating pages within Bootstrap tabs

Struggling to implement pagination within Bootstrap tabs nested inside a modal. The code snippet in question is as follows: <div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div ...

Having trouble making a table in Vue3 update responsively? Consider using Axios to request updated

My goal is to update a table dynamically using data from a Google Maps query of nearby areas. The query successfully retrieves the correct data in the onMounted lifecycle, but fails to display or return the data during rendering. I have experimented with ...

Validating the length of form inputs and selected items from a dropdown menu

I have the following form and I am attempting to validate its states as follows: themeName is required and should have a minimum of 4 characters. themeLangFrom selected value cannot be the same as themeLangTo (and vice versa). I want to display a span er ...