How do you control your publicPath property in vue.config.js

Question

I understand how to control what the publicPath would be based on process.env.NODE_ENV variable. My vue.config.js is working as expected, but only for production and non-production environments. How would I control the publicPath variable when I have qa, dev, and stage environments?

Note: I have added my .env.qa, .env.dev, and .env.stage.

vue.config.js:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
  ? '/ProductionEnv/'
  : '',
  "transpileDependencies": [
    "vuetify"
  ]
}

Answer 1

I would compute publicPath in vue.config.js like this:

function getPublicPath() {
  switch (process.env.NODE_ENV) {
    case 'production': return '/ProductionEnv/'
    case 'qa': return '/QaEnv/'
    case 'dev': return '/DevEnv/'
    case 'stage': return '/StageEnv/'
    default: return ''
  }
}

module.exports = {
  publicPath: getPublicPath()
}