title: How to read different .env files depending on production or development mode?
body: <p>I am using Vue and webpack, with an environment variable that tells webpack to build for production or development. </p>
  
  <p><strong>This is working:</strong></p>
  
  <pre><code>NODE_ENV=production webpack
  
  console.log(process.env)
  </code></pre>
  
  <p>But, <a href="https://alligator.io/vuejs/working-with-environment-variables/" rel="noreferrer">this documentation explains</a> that you can use different <code>.env</code> files according to production or development mode, to change variables in your app. </p>
  
  <p><strong>.env</strong> file</p>
  
  <pre><code>VUE_APP_ROOT=http://localhost:8000/
  VUE_APP_BASE_URL=http://localhost:8000/api/
  </code></pre>
  
  <p><strong>.env.prod</strong> file</p>
  
  <pre><code>VUE_APP_ROOT=http://realaddress/
  VUE_APP_BASE_URL=http://realaddress/api/
  </code></pre>
  
  <p>But I'm not clear on how these .env files get accessed? Apparently this works when you use <code>vue-cli</code>, but in my app this logs undefined:</p>
  
  <pre><code>console.log("environment variables")
  console.log(process.env.VUE_APP_ROOT)
  console.log(process.env.VUE_APP_BASE_URL)
  </code></pre>
  
  <p>How can I access different <code>.env</code> files depending on production mode, without <code>vue-cli</code> ?</p>