Configure environment specific variables using vue-cli

Question

I am trying to figure out how to deploy my vue app that was generated with vue-cli 3 to production. I plan on hosting it as static files (that is no server side code). I need to set certain variables in my code based on the current environment (dev vs production). These include api-urls and authentication information (none of which is secret).

What is the best way of doing this?

Here are the config docs for vue-cli 3: https://cli.vuejs.org/config/

Answer 1

You can just add your variables to existing DefinePlugin config with chainWebpack:

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => {
          args[0] = {
             ...args[0],
             "MY_API_URL": JSON.stringify(process.env.URL),
             // other stuff
          }
          return args
       })
  }
}

And configure environment variables in .env.

Answer 2

You have to start the variable names with VUE_APP (https://cli.vuejs.org/guide/mode-and-env.html)