Skip to content

Instantly share code, notes, and snippets.

@chlab
Last active April 28, 2021 09:48
Show Gist options
  • Save chlab/2af7475ac92cc4ed4295bc4243f84e6a to your computer and use it in GitHub Desktop.
Save chlab/2af7475ac92cc4ed4295bc4243f84e6a to your computer and use it in GitHub Desktop.
vue webpack boilerplate: how to add env-specific build targets

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.
// 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'
// 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"'
})
// 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
}
@evvvritt
Copy link

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')

@anoop-ananthan
Copy link

anoop-ananthan commented Dec 19, 2018

πŸ’― Awesome!! Just what I needed πŸ‘
Thank you πŸ˜ƒ

@retuner87
Copy link

Nice nice nice!!! Thanks!

@rqroz
Copy link

rqroz commented May 21, 2019

Thanks man! Nice job πŸ˜„

@roelvz
Copy link

roelvz commented Jul 15, 2019

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

@daopapp
Copy link

daopapp commented Aug 21, 2019

πŸ‘πŸ»πŸ‘πŸ»πŸ‘πŸ»πŸ‘πŸ»πŸ‘πŸ»πŸ‘πŸ»πŸ‘πŸ»πŸ‘πŸ»πŸ‘πŸ»
This save my life....tks man.
Nice Work!

@ramons03
Copy link

Thanks

@OctaneInteractive
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment