How can I create two separate bundles with vue-cli 3?

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

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.