-
-
Save amatzon/f90fbd1ee2b7ea89d55b6b26a42360fb to your computer and use it in GitHub Desktop.
Pass command line arguments to Vue CLI build
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
VUE_APP_PARAMETER=My env param | |
VUE_APP_DYNAMIC_PARAMETER= |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
`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