title: Setting environment variables correctly in Vue.js application
body: <p>So, I have the following two files in the root of my <code>vue.js</code> application:</p>
  
  <p><code>.env.development</code>:</p>
  
  <pre><code>NODE_ENV=development
  VUE_WORDPRESS_API=LOCAL
  </code></pre>
  
  <p><code>.env.production</code>:</p>
  
  <pre><code>NODE_ENV=production
  VUE_WORDPRESS_API=PRODUCTION
  </code></pre>
  
  <p>I then have the following in my <code>package.json</code>:</p>
  
  <pre><code>  "scripts": {
      "serve": "vue-cli-service serve --mode development",
      "build": "vue-cli-service build --mode production",
    },
  </code></pre>
  
  <p>So, I'm attempting to switch <code>modes</code> and therefore <code>env</code> variables depending on whether I am running <code>$ rpm run serve</code> or <code>$ npm run build</code>.</p>
  
  <p>However, when running <code>npm run serve</code>, inside my application I am seeing that the environment variables aren't being set correctly:</p>
  
  <pre><code>// console.log(process.env.VUE_WORDPRESS_API) &lt;= Undefined
  
  if (process.env.VUE_WORDPRESS_API === 'PRODUCTION') {
    axios.defaults.baseURL = window.location.hostname
  }
  
  if (process.env.VUE_WORDPRESS_API === 'LOCAL') {
    axios.defaults.baseURL = process.env.VUE_WORDPRESS_API_LOCATION
  }
  </code></pre>
  
  <p>I'm wondering, I must have something wrong with my env files? Are they named correctly? What am I missing?</p>