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.

Answer 2

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 3

Building on the other answers here, I've found it's possible to specify the build output directory in vue.config.js rather than having to do that in the command line. So then combining that with the use of the VUE_CLI_SERVICE_CONFIG_PATH environment variable makes things a lot simpler - no need for it to copy/delete config files each time you build.

You do have to specify the full paths to the Vue config files though. This works even on Windows, but only from a Linux-type terminal (e.g. I tested it from Git Bash installed by Git for Windows and it worked fine, but doesn't work from the normal Windows Command Prompt, as I couldn't find any way of setting the environment variable in the npm script which worked when run from there)

https://gist.github.com/EdwardMillen/0c417747cd8ce64b8ba550bdfa582cf5

Answer 4

It is also possible to have multiple vue.config.js configs and switch them over using the VUE_CLI_SERVICE_CONFIG_PATH environment variable.

For example, we can have a default vue.config.js and an additional vue.public.config.js and run the build like this:

# Build using vue.config.public.js
# Note: using real path here, it didn't work with relative path
CONF=`realpath vue.config.public.js`
VUE_CLI_SERVICE_CONFIG_PATH=$CONF npm run build

# Build using default vue.config.js
npm run build

Where npm run build is defined in package.json as vue-cli-service build:

"scripts": {
    "build": "vue-cli-service build"
}

Note: I didn't find any mention on VUE_CLI_SERVICE_CONFIG_PATH in the documentation, found it looking at the source code.