I have seen many other questions on this topic, but none have helped me.

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 ponent, it says that procces is not defined.

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.

export default {
  name: "Dashboard",
  data() {
    return {
      data: undefined
    }
  },
  created() {
    axios
      .get(process.env.BASE_URL + "/api/xxxxx")
      .then(res => this.data = res.data)
  },
};

webpack.config.js:

    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            'process.env.BASE_URL': JSON.stringify(process.env.BASE_URL),
        })
    ]

.env: BASE_URL=http://localhost:3000/

webpack version: 5.48.0

I have seen many other questions on this topic, but none have helped me.

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 ponent, it says that procces is not defined.

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.

export default {
  name: "Dashboard",
  data() {
    return {
      data: undefined
    }
  },
  created() {
    axios
      .get(process.env.BASE_URL + "/api/xxxxx")
      .then(res => this.data = res.data)
  },
};

webpack.config.js:

    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            'process.env.BASE_URL': JSON.stringify(process.env.BASE_URL),
        })
    ]

.env: BASE_URL=http://localhost:3000/

webpack version: 5.48.0

• javascript
• node.js
• vue.js
• axios
• environment-variables

• How did you use the definePlugin? What webpack version are you using? What is your .env structure? – Jtcruthers Commented Aug 3, 2021 at 19:33

5 Answers 5

You can get the window's base-url of the site from

window.location.origin

I think enviroment variables only work in the process and are lost after pilation.

The joys of webpack. With this answer as a reference, change your webpack plugin section to be

  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]

and install the process module

yarn add -D process

It looks like that should pass the entire process object through to the app for you. If that doesn't work, the answer below that one shows another way, but it requires installing dotenv.

One other useful bit of information, if you're using Vue3, you need to prefix the variable everywhere. You'd use VUE_APP_BASE_URL="***" in the .env file, and process.env.VUE_APP_BASE_URL when you're using it anywhere else

if you're using the vue-cli-service to run your application, as you said, you can use VUE_APP_BASE_URL as environment variable name:

VUE_APP_BASE_URL=http://localhost:3000/

Then you can use it like this:

export default {
  name: "Dashboard",
  data() {
    return {
      data: undefined
    }
  },
  created() {
    axios
      .get(process.env.VUE_APP_BASE_URL + "/api/xxxxx")
      .then(res => this.data = res.data)
  },
};

It should work.

You can use your env variables in a seperate .js file for e.g an axios instance like:

import axios from 'axios'

const httpClient = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 10000, // indicates, 10000ms ie. 10 second
  body: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

export default httpClient

And then use it in your Vue file like this

import httpClient from '../httpClient'

export default {
  name: "Dashboard",
  data() {
    return {
      data: undefined
    }
  },
  async created() {
    const axiosResponse = await httpClient.get('/api/xxxx')
    this.data = axiosResponse.data.yourData
  }
};

EDIT: You need to start your env variable with "VUE_APP_"

just
process.env.BASE_URL + "/api/xxxxx"

import.meta.env.BASE_URL + "api/xxxxx"