How can I create two separate bundles with vue-cli

Question

I want to build two separate vue apps that will be served on two different routes in an express application: a ‘public’ vue app and an ‘admin’ vue app. These two apps have their own router and store but they share a lot of custom components. How can I edit the default webpack template to make it output two separate bundles based of my two different entry points (‘public’ and ‘admin’)? The goal would be to end up with a setup more or less like this:

my-app/
+- ...
+- dist/
|  +- admin/         Admin bundle and files
|  +- public/        Public bundle and files
+- src/
|  +- components/    Shared components
|  +- admin/         Entry point, router, store... for the admin app
|  +- public/        Entry point, router, store... for the public app
+- ...

Must by available 2 dev servers http://localhost:8080/admin and http://localhost:8080/public Each project must be in own folder in dist, and own public

What i have today: created file vue.config.js in root directory With:

module.exports = {
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    // If you wish to remove the standard entry point
    config.entryPoints.delete('app')

    // then add your own
    config.entry('admin')
      .add('./src/admin/index.js')
      .end()
    .entry('public')
      .add('./src/public/index.js')
      .end()
  }
}

Answer 1

I am also very interested by this matter.

Maybe we can solve this issue with subpages :

https://cli.vuejs.org/config/#pages : "Build the app in multi-page mode. Each "page" should have a corresponding JavaScript entry file. The value should be an object where the key is the name of the entry, and the value is either:"

module.exports = {
  pages: {
    index: {
      // entry for the *public* page
      entry: 'src/index/main.js',
      // the source template
      template: 'public/index.html',
      // output as dist/index.html
      filename: 'index.html'
    },
    // an admin subpage 
    // when using the entry-only string format,
    // template is inferred to be `public/subpage.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `admin.html`.
    admin: 'src/admin/main.js'
  }
}

Answer 2

Assuming you need completely separate builds, with some shared scripts guided by your entries, you can add separate build commands.

In your package.json "scripts" section:

"scripts": {
    "build:admin": "vue-cli-service build --dest dist/admin src/admin/index.js,
    "build:public": "vue-cli-service build --dest dist/public src/public/index.js
}

For admin builds, you may run:

npm run build:admin

and for public builds:

npm run build:public

For more information, view the build target docs.