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

@kissu sure, it's right on the project root, only folder, no file, the projects are organized based on this dev.to/hamishclulee/… — Camilo Casadiego
– Camilo Casadiego, Commented Mar 17, 2022 at 0:33

Camilo Casadiego · Accepted Answer · 2022-03-18 16:42:59Z

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

Collectives™ on Stack Overflow

Js files on wrong location after vue build

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related