vue webpack boilerplate: how to add env-specific build targets

README.md

When using the vue-webpack-boilerplate, you will have only a production build by default (besides dev and test setups). My team often has at least another environment we call "staging" where the client can test new features before we move them to production. Oftentimes, these environments will have env-specific config values, like a different API URL.

With the changes outlined below, you can create a separate config per environment. This assumes you've created a Vue.js project with vue-webpack-boilerplate.

1. Apply the changes to the corresponding files in your project as outlined below
2. Now, when you run npm run build staging it will build your project with the config values specific to your staging environment. You can easily add any number of other environments and build them the same way. npm run build or npm run build production will still build your production environment.

build.js

// remove the next line from your build/build.js file:
process.env.NODE_ENV = 'production'

// add these lines:
// allow specifying the target environment or fallback to prod
process.env.NODE_ENV = process.argv[2] || 'production'

staging.env.js

// create this file at config/staging.env.js
// the name and NODE_ENV (below) must match the env-name you added in build/webpack.prod.conf.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"staging"',
  // override any settings in ./prod.env.js in here, e.g. the URL to your API
  API_URL: '"https://staging.url/api"'
})

webpack.prod.conf.js

// remove the next 3 lines from build/webpack.prod.conf.js:
const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')

// add these lines:
// use the env-specific config file
let env
switch (process.env.NODE_ENV) {
  case 'test':
    env = require('../config/test.env')
    break
  // this is the new env. you can of course change the name or add even more envs
  case 'staging':
    env = require('../config/staging.env')
    break
  case 'production':
  default:
    env = require('../config/prod.env')
    break
}

Perfect, thanks

Thanks so much - this should really be merged into the boilerplate project.

Thanks for this!
You might economize the webpack.prod.conf.js edit 🤓

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : process.env.NODE_ENV === 'staging'
  ? require('../config/staging.env')
  : require('../config/prod.env')

💯 Awesome!! Just what I needed 👍
Thank you 😃

Nice nice nice!!! Thanks!

Thanks man! Nice job 😄

Thanks, I think this should be part of the boilerplate project

👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻
This save my life....tks man.
Nice Work!

Thanks

Hi, I've made these changes to a project and it's taking a long time to build, to the extent that I'm having to stop it after 20 minutes.