Question

0

351

Views

Js files on wrong location after vue build

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

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T10:46:51.474Z

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

0

351

Js files on wrong location after vue build

1 answers

0

Find remote jobs

Andres GPT