CODEWITHSUNDEEP
javascriptnode.jsvue.jsaxiosenvironment-variables
Jorge Montejo
Jorge Montejo

Reputation: 605

Using environment variables in vue

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)
  },
};

enter image description here

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

Upvotes: 2

Views: 8324

Answers (5)

YOUSOF Jafari
YOUSOF Jafari

Reputation: 1

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

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

Upvotes: 0

Oxymoron
Oxymoron

Reputation: 74

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.

Upvotes: 3

Gabriel Berchmann
Gabriel Berchmann

Reputation: 539

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

Upvotes: 0

Andres Foronda
Andres Foronda

Reputation: 1409

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.

Upvotes: 0

Jtcruthers
Jtcruthers

Reputation: 956

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

Upvotes: 1

Related Questions