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

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

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.

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

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.