Skip to content

Instantly share code, notes, and snippets.

@amatzon
Last active April 1, 2019 07:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amatzon/f90fbd1ee2b7ea89d55b6b26a42360fb to your computer and use it in GitHub Desktop.
Save amatzon/f90fbd1ee2b7ea89d55b6b26a42360fb to your computer and use it in GitHub Desktop.
Pass command line arguments to Vue CLI build
VUE_APP_PARAMETER=My env param
VUE_APP_DYNAMIC_PARAMETER=
/**
`vue inspect` helps you find the right config you’d need to tap into.
Inspect's related output:
// config.plugin('define')
new DefinePlugin(
{
'process.env': {
NODE_ENV: '"development"',
BASE_URL: '"/"'
}
}
)
Assuming you'd run `yarn serve --your_parameter=value` or in Vue CLI fashion: `yarn serve --your_parameter value`
Using `chainWebpack` option you could add:
*/
const { argv } = require('yargs')
module.exports = {
chainWebpack: config => {
config.plugin('define').tap(options => {
options[0]['process.env'].YOUR_PARAMETER = `"${argv.your_parameter}"`;
return options;
})
}
}
/**
If you'd need to access process env variables durin app runtime
you'd also need to predefine those in an .env file (since Vue CLI v3)
[Environment Variables]: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
If you need them to be dynamic (like version number) you can just define them empty in `.env`
and overwrite the value in `vue.config.js`
"Advanced" version going through your existing env variables and matching them
with your VUE_APP prefixed ones
overwriting values accordingly:
*/
const { argv } = require('yargs')
const myExistingEnvSettings = {
VERSION: '123',
DYNAMIC_PARAMETER: 'Some other dynamic env value'
}
chainWebpack: (config) => {
config.plugin('define').tap((options) => {
const processEnv = options[0]['process.env']
Object.keys(myExistingEnvSettings).map((key) => {
let processEnvKey = `VUE_APP_${key}`
if (processEnv.hasOwnProperty(processEnvKey)) {
// note the double quotes for interpolation is necessary for node env
processEnv[processEnvKey] = `"${myExistingEnvSettings[key]}"`
}
})
return options
})
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment