How to ignore devServer settings in vue.config.js when building for staging environment?

Question

I'm building an app with Vue. I needed https working on my local environment for dev and testing purposes. I successfully created the necessary certificates following this tutorial . To get the dev server to use them I copied the server.key and server.crt files into the root of my project and left the rootCA.pem file in ~/.ssh . I added an entry in /etc/hosts to alias localhost for my domain like:

127.0.0.1 example.test

I then edited vue.config.js in the root of my project to look like:

const fs = require('fs')

module.exports = {
  devServer: {
    host: 'example.test',
    https: {
      key: fs.readFileSync('./server.key'),
      cert: fs.readFileSync('./server.crt'),
      ca: fs.readFileSync(process.env.HOME + '/.ssh/rootCA.pem')
    }
  }
}

This works great locally. My problem is on my staging server.

My staging server is running ubuntu (16.04) and has an actual SSL cert (ie not self-signed) installed using certbot (LetsEncrypt). My project is a static frontend so I am serving it with nginx configured to point to the /dist directory and make the project available at staging.example.com . This was all working fine before I added the devServer config in vue.config.js above.

What I expect to happen:

When I build the project for staging, ie

npm run build -- --mode staging

I expected it to ignore the devServer config section since NODE_ENV === 'production' (set in my .env.staging file).

What actually happens:

The build process fails, complaining that:

Error loading vue.config.js:
Error: ENOENT: no such file or directory, open './server.key'

Question: How do I get the build process to ignore the devServer section of vue.config.js when building for "staging" or "production?"

Answer 1

vue.config.js doesn't automatically detect the environment. As it says in the Vue CLI configuration docs :

If you need conditional behavior based on the environment, or want to directly mutate the config, use a function (which will be lazy evaluated after the env variables are set). The function receives the resolved config as the argument. Inside the function, you can either mutate the config directly, OR return an object which will be merged.

How to actually do this was not immediately clear to me. Here's what ended up working:

const fs = require('fs')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config.devServer = {
        host: 'qzuku.test',
        // https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec
        https: {
          key: fs.readFileSync('./qzukuDevServer.key'),
          cert: fs.readFileSync('./qzukuDevServer.crt'),
          ca: fs.readFileSync(process.env.HOME + '/.ssh/rootDevCA.pem')
        }
      }
    }
  }
}

Hope this helps!