Outputting multiple webpack builds with vue-cli

Question

I want to have a different build per language. The translated strings will be baked into the different builds:

/dist
    app-en.js
    app-nl.js
    app-de.js

I know that with in webpack.config.js, you can do the following:

module.exports = [configA, configB]

where it will build two versions of your app based on configA and configB.

My project is based on vue-cli, so I do not have a webpack.config.js, only a vue.config.js.

In vue.config.js, you can supply the webpack config in configureWebpack, but this must be an object (or a function which returns an object), which means that I cannot supply an array with the different configuration options per build.

How can you build multiple dists with vue-cli?

Answer 1

The way I ended up solving was to create a seperate build script, which would call the vue build command with different parameters each time:

//build.js
languages.forEach((language) => {
    execSync(`npx vue-cli-service build --language ${language} --mode ${args.mode}`)
}

In vue.config.js, I extract the given language from the parameters using minimist, after which I can specify a different outputDir:

//vue.config.js
const args = require('minimist')(process.argv.slice(2))
const language = args.language

module.exports = {
    outputDir: path.resolve(__dirname, `dist/${language}`)
}