title: Access to environment variables in Vue app in Heroku
body: <p>I am building an app in Vue for the front and Node for the back and I am using environment variables for private API keys. The .env file are in the root for my global project and locally I am using Dotenv-Webpack to access them in my front.</p>
  <p>Locally everything is working but when I am deploying the app in Heroku, the variables are <em>undefined</em></p>
  <p>Here is the structure of my project</p>
  <pre><code>client
    -&gt; public
    -&gt; src
       -&gt; components
       -&gt; assets
       ...
    ...
  routes
  services
  tests
  ...
  .env
  </code></pre>
  <p>And here is the configuration of my vue.config.js</p>
  <pre><code>const path = require(&quot;path&quot;);
  const Dotenv = require(&quot;dotenv-webpack&quot;);
  
  module.exports = {
    transpileDependencies: [&quot;vuetify&quot;],
    outputDir: path.resolve(__dirname, &quot;../public&quot;),
    devServer: {
      proxy: &quot;http://localhost:5000&quot;
    },
    configureWebpack: {
      plugins: [
        new Dotenv({
          path: &quot;../.env&quot;, // load this now instead of the ones in '.env'
          systemvars: true
        })
      ]
    }
  };
  </code></pre>
  <p>Does anyone have an idea ? Just to reminder, it can access my .env in my components locally but not when I deploy the app in Heroku</p>