Vue.js Cli: How to Use Multiple vue.config.js Configs

It can be useful to have more than one configuration file, for example, to build several code bundles.

The config file to use can be set with VUE_CLI_SERVICE_CONFIG_PATH environment variable:

# Build using vue.config.public.js
CONF=`realpath vue.config.public.js`
VUE_CLI_SERVICE_CONFIG_PATH=$CONF npm run build -- --mode production

# build using vue.config.js
npm run build -- --mode production

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

It is also possible to create several bundles using vue cli multi-page mode, but in this case we will have big common js and css “vendors” package.

The js bundle is solvable with custom chanks settings, but it still leaves big css shared package (I didn’t find the solution for that).

The separate vue.config.js file had an advantage of building a completely independent bundle.

The alternative, check the comments is to have separate configs and copy them over, but this is less convenient than using the environment variable.

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