title: Using environment variables in vue
body: <p>I have seen many other questions on this topic, but none have helped me.</p>
  <p>With vue I want to use an api, but the url will change when the app is in production so in the .env file I have defined a BASE_URL, but when I use it in a vue component, it says that procces is not defined.</p>
  <p>I've tried with webpack.DefinePlugin in webpack.config.js or naming the environment variables as VUE_APP_BASE_URL but nothing seems to work.</p>
  <pre><code>export default {
    name: &quot;Dashboard&quot;,
    data() {
      return {
        data: undefined
      }
    },
    created() {
      axios
        .get(process.env.BASE_URL + &quot;/api/xxxxx&quot;)
        .then(res =&gt; this.data = res.data)
    },
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/mIuXi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mIuXi.png" alt="enter image description here" /></a></p>
  <p>webpack.config.js:</p>
  <pre><code>    plugins: [
          new VueLoaderPlugin(),
          new webpack.DefinePlugin({
              'process.env.BASE_URL': JSON.stringify(process.env.BASE_URL),
          })
      ]
  </code></pre>
  <p>.env:
  <code>BASE_URL=http://localhost:3000/</code></p>
  <p>webpack version: 5.48.0</p>