Use the .env variable to assign the baseURL in VueAxios

Question

Use the .env variable to assign the baseURL in VueAxios

I am currently utilizing a standard Vue starter webpack template with VueAxios integration. My aim is to set up axios configuration using .env variables specifically when building with the dev command. I have everything structured within the /config/index.js:

const devEnv = require('./dev.env')
module.exports = {
...
    host: devEnv.host || 'localhost',
    port: devEnv.port || 8080,
...
}

Subsequently, I establish my host and port in dev.env.js located in the same directory, and it operates seamlessly.

const dotenv = require('dotenv').config({path: '../.env'})

let host = process.env.VUE_HOST;
let port = +process.env.VUE_PORT;

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    host,
    port
})

However, the issue arises when trying to access the host value within src/main.js of my Vue application.

When attempting it like this, an error message is returned stating:

vue is not defined

import axios from 'axios'
import VueAxios from 'vue-axios'
...
Vue.use(VueAxios, axios)
Vue.axios.defaults.baseURL = `http://${process.env.host}:${process.env.port}`;

While the port functions correctly, the host triggers an error.

javascript webpack vue.js axios

Answer 1

Answer №1

Update for Simplified Vue CLI 3 Setup

To easily set up your base URL in Vue CLI 3, simply add VUE_APP_BASE_URL to your project's .env file. This will allow you to access it using:

process.env.VUE_APP_BASE_URL

For a more efficient solution, consider configuring a development server as well by following the official guide.

Prior Solution Method

The previous method required a few extra steps:

In your webpack.dev.conf.js file, create a special variable within the plugins section instead of directly using process.env.

new webpack.DefinePlugin({
    'process.env': require('../config/dev.env'),  // Avoid using this for baseURL
    'baseURL': JSON.stringify(`http://${HOST || config.dev.host}:${PORT || config.dev.port}`)
}),

In your \src\main.js file, define and use the baseURL like this:

if (typeof baseURL !== 'undefined')
{
    Vue.axios.defaults.baseURL = baseURL;
}

Answer 2

Update for Simplified Vue CLI 3 Setup

To easily set up your base URL in Vue CLI 3, simply add VUE_APP_BASE_URL to your project's .env file. This will allow you to access it using:

process.env.VUE_APP_BASE_URL

For a more efficient solution, consider configuring a development server as well by following the official guide.

Prior Solution Method

The previous method required a few extra steps:

In your webpack.dev.conf.js file, create a special variable within the plugins section instead of directly using process.env.

new webpack.DefinePlugin({
    'process.env': require('../config/dev.env'),  // Avoid using this for baseURL
    'baseURL': JSON.stringify(`http://${HOST || config.dev.host}:${PORT || config.dev.port}`)
}),

In your \src\main.js file, define and use the baseURL like this:

if (typeof baseURL !== 'undefined')
{
    Vue.axios.defaults.baseURL = baseURL;
}

Answer 3

Answer №2

I found the answer above to be helpful, but I would like to make a slight amendment. It is necessary to define a constant in the /src/main.js file.

For example:

const baseURL = 'http://localhost:8080';
if (typeof baseURL !== 'undefined') {
  Vue.axios.defaults.baseURL = baseURL;
}

There is no need to add any code in the webpack.dev.conf.js file. However, this solution may only apply to my specific problem.

The issue I am facing can be found here: Dynamic host in axios

Answer 4

I found the answer above to be helpful, but I would like to make a slight amendment. It is necessary to define a constant in the /src/main.js file.

For example:

const baseURL = 'http://localhost:8080';
if (typeof baseURL !== 'undefined') {
  Vue.axios.defaults.baseURL = baseURL;
}

There is no need to add any code in the webpack.dev.conf.js file. However, this solution may only apply to my specific problem.

The issue I am facing can be found here: Dynamic host in axios

Answer 5

Answer №3

It's important to remember that only certain variables, such as NODE_ENV, BASE_URL, and any variable beginning with VUE_APP_, will be included in the client bundle through webpack.DefinePlugin.

An example of a valid variable name would be VUE_APP_HOST.

For more information, please visit this link: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

Answer 6

It's important to remember that only certain variables, such as NODE_ENV, BASE_URL, and any variable beginning with VUE_APP_, will be included in the client bundle through webpack.DefinePlugin.

An example of a valid variable name would be VUE_APP_HOST.

For more information, please visit this link: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

Use the .env variable to assign the baseURL in VueAxios

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to delete an item from a React array state?

Inspect the HTTP response status code within the Axios promise catch block in VueJs

Inject SCSS variables into Typescript in Vue 2 Using Vue-cli 5

Check if the data is in JSON format or a string before executing any logic based on that information

"Troubiling with preact-cli and Babel/TypeScript configurations for enabling correct functionality of Symbol.iterator and spread syntax

"Switching from dispatch to emit in VueJS: A step-by-step

Experiencing a 404 error after attempting to access an endpoint following a successful MSAL Azure AD

Issue with AngularJS $broadcast not functioning when initializing

angularslideables retro animation

Running a Python script from Node.js may seem daunting at first, but with

Transmit a collection of images in JSON format from a Node.js server

"Clicking on one item in the Bootstrap submenu doesn't close the other items,

Codepen fails to function properly after being uploaded to a server

Encountering an error when trying to call useI18n in Vue 3? Remember to always include it at the beginning of the `setup` function to

Exploring the number of checked checkboxes within a dynamic list using Ionic 3 and Angular

EffortlessDrop.js and anchors

using Javascript to eliminate necessary tags from concealed tabs

function to trigger lazy loading with jQuery and callback function

How can you write a parameterless function in Ramda using a point-free style?

Tips for creating immersive 3D games on the web