Webpack: [Question] How to pass env variables correctly

Created on 18 Apr 2017  路  6Comments  路  Source: vuejs-templates/webpack

I am trying to pass API URL as env variable to configure api calls, but got a problem.

Nothing happend when I am trying to run API="http://example-url.com" npm run dev.
process.env is still the same as in config file. How could I pass env variable properly?

Most helpful comment

That env variable you created is only available in the node process that runs webpack and its config.

In order to make webpack aware that this env variable should be defined during bundling for your scripts, you have to add it here:

https://github.com/vuejs-templates/webpack/blob/master/template/config/dev.env.js

like this:

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
  API: JSON.stringify(process.env.API) // necessary so tht webpack injects the value including the "" quotes, as astring.
})

...and similarly, in the other env files of the /config directory.

If you need further support, please open a thread on forum.vuejs.org.

Github should be used for bugs/features. I won't reply here. Thanks for understanding.

All 6 comments

That env variable you created is only available in the node process that runs webpack and its config.

In order to make webpack aware that this env variable should be defined during bundling for your scripts, you have to add it here:

https://github.com/vuejs-templates/webpack/blob/master/template/config/dev.env.js

like this:

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
  API: JSON.stringify(process.env.API) // necessary so tht webpack injects the value including the "" quotes, as astring.
})

...and similarly, in the other env files of the /config directory.

If you need further support, please open a thread on forum.vuejs.org.

Github should be used for bugs/features. I won't reply here. Thanks for understanding.

Thanks

This doesn't seem to work for me. My process.env is empty no matter what I do... I can't seem to figure it out. any ideas?

Go to forum.vuejs.org and ask there, please.

Unless you can reproduce with a fresh install of the template, in that case, open a new issue with a reproduction.

Actually, I figured it out, I didn't know WebPack used them like C #define statements. I was setting window.process = process so I could inspect it and inside of the object the env key was an empty object, but when I console.log(process.env) then I got the correct output. Until then I didn't notice it was all being replaced inline...

Thanks anyways!

Sorry for commenting on a closed thread but this might help people with this issue :

As the last comment say, webpack manage process.env like a C #define, so if your process.env is empty you might just need to stop your dev server and restart it.

Was this page helpful?
0 / 5 - 0 ratings