CODEWITHSUNDEEP
vue.jsvuejs2axiosnetlify
Jack Giratina
Jack Giratina

Reputation: 169

How to set up environment variables for production in Vue

When i deployed mysite on netlify, it was successfully deployed. But it does not work. and when I inspected i came to know that my app is still hitting the localhost . My question is how should I declare environment variables? I am new to this..

Axios file-

import axios from 'axios'
import store from '../store/index'

export default ()=>{
    return axios.create({
    baseURL:process.env.VUE_APP_API_BASE_URL ||
    process.env.API_BASE_URL ||`http://localhost:8082/`,
    headers:{
        authorization:`${store.state.token}`
    }
    })
}

vue.config.js



module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // modify the options...
          return options
        })
  }
}

Upvotes: 2

Views: 2948

Answers (3)

codingforworlddomination
codingforworlddomination

Reputation: 1129

In fact, you can use Netlify environmental variables also locally, by using Netlify Dev: https://www.netlify.com/products/dev/ I've done that in one of my projects recently: https://github.com/sunyamare/ubiqum-tgif Note: It seems you can only use the variables in Netlify (lambda) functions.

Upvotes: 0

Justin
Justin

Reputation: 373

You can create .env.development and .env.production files for development and production variables respectively.

You can check here for more clarification.

Upvotes: 0

T. Short
T. Short

Reputation: 3614

Environment variables are only accessible server side. In order for the client side to have the values you need to declare it in the global scope.

Webpack has a plugin specifically for this called DefinePlguin:

https://webpack.js.org/plugins/define-plugin/

Something like:

new webpack.DefinePlugin({
  BASE_URL: JSON.stringify(process.env.VUE_APP_API_BASE_URL),
});

Then, in the client you can access BASE_URL

Upvotes: 3

Related Questions