How to load multiple apps with vue devServer configuration

Hi i have a app called Home which has installable plugins which i can install at any point of time which runs in iframe

<Home /home/user/mainprojects/index.html> <-- Home app
   <Bed iframe /home/user/plugins/bed/index.html> <-- plugins app
   <Bed /iframe>
</Home>

with this nginx setup i'm able to load the plugin app(Bed) with after build(which is heavy time consuming)

here is nginx setup for that

     location / {
             alias /home/user/mainprojects/dist/;
             index index.html;
     }


  location /Bed {
      alias    /home/user/plugins/bed/dist/;
      index  index.html index.htm;
  }

Question: i don't want to build main app Home app i want to run it through serve, but second app i,e plugin i will always build which will be available as bundle. with above nginx setup after building both(i,e npm run build, bundle) it will work fine. i want to avoid main app build.

here is how my vue.config.js will look like

module.exports = {
    devServer:{
        proxy:{
            '^/appReplacer':{
                 target: 'http://100.148.1.9:9003/',
                 changeOrigin:true,
                 logLevel:'debug',
                 pathRewrite: {'^/appReplacer':'/'}
            }
        }
    }
}

Still looking for a solution..

Please help me thanks in advance !!

Assuming you are using Vue CLI v4 which is based on Webpack 4

Webpack DevServer is based on Express framework and allows to setup custom Express middleware using devServer.before option

This way you can configure any path to serve virtually anything you want. For example use the static middleware to serve some static files (dist of your plugin in this case)

Note that following code depends heavily on version of Vue CLI in use. Current release version of Vue CLI 4.5.15 is using "webpack-dev-server": "^3.11.0" which uses "express": "^4.17.1"

// vue.config.js

// express should be installed as it is used by webpack-dev-server
const express = require('express');

module.exports = {
  //...
  devServer: {
    before: function(app, server, compiler) {
      app.use('/url/to/plugin', express.static('dist/location/of/your/plugin'));
    }
  }
};