Different environment files for production and development in vue+webpack app

Question

I'm building a vue app using webpack. Now that I have to deploy the app to a production server I feel the need to have different settings for development and production cases (for example the main url where the app must reach an api service changes for each type). After reading some guides I have not yet clear how to achieve this.

What I would like to do is that when I run:

npm run dev

environment variables in development.env should be used and when I run:

npm run build

environment variables in production.env should be used.

Is it possible to accomplish this with webpack?

Cheers.

Answer 1

you can use webpack-cli and --env allows you pass as manu environment variables as you want.

In your build script pass this:

--env.PLATFORM=production

For example anywhere in webpack config, you need to covert to module.exports to a function:

module.exports = env => {

 if (env.PLATFORM === 'production') {
  return {  
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }

   };
   }

But for production and development I would recommend to make different webpack config files:

webpack.prod.config.js
webpack.dev.config.js

Later you can pass --config webpack.prod.config.js in your build script. And usually for env in webpack when it comes to merging different parts of webpack config targeting different environments