Using environment variables in vue

Question

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 component, 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

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

Oxymoron · Accepted Answer · 2021-08-04 14:46:33Z

3

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 compilation.~~

edited Aug 4, 2021 at 14:46

answered Aug 3, 2021 at 19:38

Oxymoron

741 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Estus Flask Over a year ago

Env variables are hardcoded into a bundle on compilation. window.location.origin can be used but it's not always the same as BASE_URL

Jorge Montejo Over a year ago

Not exactly what I asked for, but it solves my problem, thank you.

Jtcruthers · Accepted Answer · 2021-08-03 20:58:57Z

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

Andres Foronda · Accepted Answer · 2021-08-04 13:12:25Z

0

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.

answered Aug 4, 2021 at 13:12

Andres Foronda

1,4191 gold badge10 silver badges13 bronze badges

Comments

Gabriel Berchmann · Accepted Answer · 2021-08-04 13:17:46Z

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_"

Yunnosch · Accepted Answer · 2022-10-02 06:13:04Z

0

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

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

edited Oct 2, 2022 at 6:13

Yunnosch

26.8k9 gold badges46 silver badges66 bronze badges

answered Sep 15, 2022 at 11:38

YOUSOF Jafari

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Using environment variables in vue

5 Answers 5

2 Comments

Comments

Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

1 Comment

1 Comment

Linked

Related