Question! Access process.env.NODE_ENV

[juanr2001]

How do I access 'production' mode and 'development' mode using
process.env?

For those who want to have access to the process.env.NODE_ENV inside the src/

1. create a config folder in the root or inside the /build
2. Assuming you created a config folder in the root. Within the config folder create three files call dev.env.js, prod.env.js, and test.env.js
3. Inside the dev.env.js file:

const merge = require('webpack-merge');
const prodEnv = require('./prod.env');
module.exports = merge({
  NODE_ENV: '"development"'
});

4. Inside the prod.env.js file

'use strict';
module.exports = {
  NODE_ENV: '"production"'
};

5. Inside the test.env.js file

'use strict';
const merge = require('webpack-merge');
const devEnv = require('./dev.env');
module.exports = merge(devEnv, {
  NODE_ENV: '"test"' // call it '"testing"' if you'd like
});

The way to let webpack set the environment variables above and have access to them when npm run dev or npm run prod.

1. Go to build/webpack.config.dev.js
2. Inside the plugins array add:

plugins: [
  ...,
  new webpack.DefinePlugin({
    'process.env': require('../config/dev.env')
  }),
 ...,
]

3. Go to build/webpack.config.prod.js
4. Inside the plugin array add:

plugins: [
  ...,
  new webpack.DefinePlugin({
    'process.env': require('../config/prod.env')
  }),
 ...,
]

Now you know how to do it for the testing...

I would advice the owner of this repo to create webpack.test.config dedicated for testing :)

For new developers: When you nom run prodwebpack will insert the process.env.NODE_ENV in plain text. You do not have to worry about anything. Webpack will take of you environment variables :)

// In any Vue component you can use the environment variables as:
export default: {
  data () {
   envar: process.env.NODE_ENV
  }
}

I love this repo and I would love this template to thrive!!!! Thank you very much to whoever started this repo!

[dfcook]

Hi, you would have to set the environment variable in the npm script, using something like cross-env.

And then you would have to change the webpack config files to set mode using something like this:

mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'

[juanr2001]

@dfcook I posted the solution for new developers. I would love to see it in the template :). So that new Vue developers will understand how powerful is webpack :)