Js files on wrong location after vue build

Question

I have two very similar projects, both base codes work on top of the same package/vueConfig files, yet, when I build one of the projects, I'm getting a bunch of js files outside the js folder, which is what I need to fix.

Already checked solutions like this one and checked documentation but still getting the same output.

Here is the scripts part 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 my vue.config

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
      },
    }
  }
}

My general project structure is as follows

Answer 1

The issue was related to ace and how it internally loads the different components, which is dynamic, and leads to all the junk on the main folder, lucky this and this gave the right idea.

This is the vue.config.js I used to fix the issue

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
      },
    }
  }
}

And now all the ace stuff is on its own folder