Vue.js destroys the link from the .env item

Apologies for my poor English skills.

The contents of the .env file are as follows:

VUE_APP_REST_API_URL=http://192.168.1.57:8080/rest/web
VUE_APP_RESOURCE_LOGIN=token

Within the Login.vue component, the code is as shown below:

const url = path.join (process.env.VUE_APP_REST_API_URL, process.env.VUE_APP_RESOURCE_LOGIN);
console.log (url);
this.axios.post(url, formdata)

Upon executing the console.log command, the following output is displayed: Login.vue? 7463: 95 http:/192.168.1.57:8080/rest/web/token Why has one of the two slashes been removed? Could it be due to URL escaping?

javascriptvue.jsenvironment-variables

Answer №1

Here's an alternative method for achieving this task, which I personally find more suitable when working with a template generated using vue-cli.

const apiEndpoint = `${process.env.VUE_APP_REST_API_URL}/${process.env.VUE_APP_RESOURCE_LOGIN}`

It's always beneficial to explore multiple solutions rather than being fixated on just one option.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to enable ng-model input HTML in AngularJS

I am working on an HTML code snippet that includes a form input for audio link. However, when I try to enter a URL in the input field and submit the form, I encounter the following errors: <div class="inner-content-linkaudio"> <label for="linka ...

javascriptangularjsmeanmeanjs

The date format in AngularJS is not being displayed correctly according to the request

My goal is to retrieve the date in the format of dd/MM/yyyy and pass it along to my URI. However, I am encountering an issue where the date is not being passed in the requested format. Below is the snippet of my HTML code: <script type="text/ng-templat ...

javascripthtmlangularjsdate

Retrieving PNG text content from a Postgres database and then transmitting the image to the React front-end

I am facing a challenge with extracting an image stored as text in my PostgreSQL server. The "buildings" table contains a column called "testimg" with a data type of "text" where the image data is stored as a PNG file's text. I have successfully conne ...

javascriptreactjspostgresqlexpress

Trouble with parsing dates in JavaScript using Moment.js

I'm retrieving dates from SQL Server that are passing through ASP.NET, and then iterating through a list of objects in jQuery to display the dates along with other data. However, regardless of the various date/time values coming from the database, the ...

javascriptjquerymomentjs

Challenges with texture mapping when converting Blender files to Three.js using .JSON format and OBJ files to .JS format

I've hit a roadblock. After scouring all relevant threads I could find, none quite match up with my issue. The aim is to export and texture map a model in either .JSON or .JS format to render the same as an .OBJ version when viewed through WebGL. The ...

javascriptthree.jstexturesblender

Obtain the final result once all promises have been successfully resolved in a loop

Here is an array of IDs: let idsArray = [1, 2, 3, 4, 5]; How can I ensure that a promise is returned only after all calls made within the loop are completed? let deferredPromise = $q.defer(), finalResult = []; fo ...

javascriptpromise

What is the best way to interact with parent elements inside an iframe?

I'm working on a fresh image uploader where I aim to place the file input in an iframe and display the uploaded images on the parent page. How can I achieve access to the parent elements from within the iframe? Any examples would be greatly appreciate ...

.netasp.netjavascripthtmlajax

The function getStaticPaths() will generate a 404 error, indicating that the page

I have encountered a persistent issue with the getStaticPaths() function throwing a 404 error. After investigating, I suspect that the problem may lie in the implementation of the getAllPostIds() function, which is supposed to generate an array of object ...

javascriptarraystypescriptnext.js

Optimal method for delivering static JavaScript from a node module's "dist" directory with Next.js

Currently, I am working on an application that utilizes Tesseract (OCR) to extract text from images. I am interested in making some JS files from node_modules/tesseract.js/dist downloadable directly in the browser. While I can simply copy the files to ./ ...

javascriptnode.jswebpacknext.jstesseract

Please reset the form fields after the most recent edit

I've created a form that includes multiple select elements. When an option is selected, it activates the next select element and updates it with values using Ajax and PHP. However, I'm facing an issue where changing a previous option only resets ...

javascriptjqueryhtmlajax

Using JavaScript, enter the value into the input field and then redirect the

I'm encountering a minor issue with my contact form and jQuery redirection based on input fields. Everything was working smoothly until I attempted to integrate the redirection into the form validation code. Redirection snippet: $("#signup").submit ...

javascriptjquery

Difficulty encountered with React's map function on the example

I am attempting to display data using the example below. Here is my list.js file: import React, { Component } from 'react'; import { Person} from './Person'; export class List extends Component { render() { const persons ...

javascriptreactjsjsx

Removing/modifying selected choices in an element

I have implemented a material ui select element with the ability to make multiple selections using checkboxes. My query is, can I incorporate the functionality to delete or update names directly from the select element itself? For instance, by clicking on ...

javascriptreactjsarraystypescriptmaterial-ui

"Implementing a feature in React JS react-table to dynamically add a new column when a

I'm struggling to add a new column to react-table when a button is clicked. Even after re-rendering the table with a flag, I can't seem to add the new column. Can anyone suggest where I might be going wrong? Here's the link to the executable ...

javascriptreactjsreact-table

What causes the component to remount with every update to its state?

PLEASE NOTE: Before posting this question, I realized that there were some errors in my code. I understand now that this question may not be helpful to others as it contains misleading information. I apologize and appreciate those who took the time to res ...

javascriptreactjsreact-nativeuse-state

Creating Interactive Maps with Leaflet Using Javascript Switch Case

Implementing a javascript switch statement to dynamically assign fillColor based on specific case values. The current code successfully assigns the value according to the first case, but fails to execute the subsequent cases. var ElectionDistrictLayer = ...

javascriptjsonswitch-statementleafletgeojson

Using next.js and redux for user authentication: a step-by-step guide

After creating my next.js app with version 9.3.5, the authentication was working perfectly. However, after updating next-redux-wrapper and next.js, I noticed that when I refresh the page, the user is no longer authenticated even though the cookie still exi ...

javascriptreactjsauthenticationreduxnext.js

Guide on implementing a template within a form using Vue.js

I have set up a Vue instance for handling the form data var formInstance = new Vue({ el: '#amount_form', data: { logdate: '', amount:'', description:'' }, methods: { ...

javascriptvue.js

Trouble persisting in loading PopperJS and Bootstrap through RequireJS, despite following the suggested PopperJS version

Struggling to load jquery, popperjs, and bootstrap (v4-beta) using requirejs, I'm consistently encountering this error in the console: Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) at bootstrap.js:6 at bootstrap ...

javascripttwitter-bootstraprequirejsbootstrap-4popper.js

Typescript's dynamic React component and its conditional types

I am currently working on a dynamic React component and I am facing an issue with properly passing the correct propType based on the selected component. The error arises when using <SelectComponent {...props.props} /> because the props do not match t ...

javascriptreactjstypescript