Different .env.development configurations in Vue bundled with Webpack

Question

Different .env.development configurations in Vue bundled with Webpack

I'm having trouble figuring out how to set up two different configurations for my Vue.js project on my local environment using vue-cli 3.

The first configuration should have VUE_APP_API_URL pointing to my localhost, while the second configuration should connect to a development/staging server.

I'm thinking of using .env.development-1 and .env-development-2 to achieve this, allowing me to easily switch between the two configurations without much hassle.

While I've come across information about build modes, most of them focus on building the project. All I want is to run the local dev server with a different configuration. Can anyone guide me on how to accomplish this?

javascript vue.js webpack webpack-dev-server

Answer 1

Answer №1

After receiving helpful comments on my initial post, I discovered that the solution was actually quite simple:

All I had to do was create an .env.staging file with the VUE_APP_API_URL set to the staging server, leaving everything else unchanged.

Then, I updated my scripts in the package.json file as follows:

"scripts": {
    "serve:local": "vue-cli-service serve",
    "serve:staging": "vue-cli-service serve --mode staging",
}

And it worked like a charm.

Initially, I had to wrap my head around the concept, but with the help provided, I was able to successfully implement the solution. Thank you!

Answer 2

After receiving helpful comments on my initial post, I discovered that the solution was actually quite simple:

All I had to do was create an .env.staging file with the VUE_APP_API_URL set to the staging server, leaving everything else unchanged.

Then, I updated my scripts in the package.json file as follows:

"scripts": {
    "serve:local": "vue-cli-service serve",
    "serve:staging": "vue-cli-service serve --mode staging",
}

And it worked like a charm.

Initially, I had to wrap my head around the concept, but with the help provided, I was able to successfully implement the solution. Thank you!

Different .env.development configurations in Vue bundled with Webpack

Answer №1

Similar questions

Comparing Vue 3 reactivity using Provide/Inject versus accessing default slots with this. $slots.default

Identify the absence of search results in an Ajax request to the search page before rendering the HTML content

What is the best way to trigger a function exclusively upon clicking a particular element?

Error: Route configuration must include a "path" in [vue-router]

Set up a trigger to activate when a WordPress User Role is selected, or alternatively, execute JavaScript

Transform JavaScript into Native Code using V8 Compiler

What are some ways to reduce the delay of Dark mode on a website?

JavaScript causing values to disappear when the page refreshes

VueJS not displaying OpenLayers map

What triggers Vue 2 to evaluate a "get" function/property?

Ensuring AngularJS ui-router/app waits for $http data to avoid Flash of Unstyled Content (FOUC)

Randomly generated numerical value in input field

Is it possible to execute a function when the AJAX request is successful and returns a status code of

Angular - Implementing an Object Mapping Feature

Incorporating trail markers in your Vue.js app

Tips for transferring large data without a page redirect using jQuery's post method:

I require my two elements to possess opposing transformations in their coordinates or directions to enable dragging capabilities

Unable to launch React Native project on emulator now

What could be causing my router UI in angular.js to malfunction?

Why is it that consolidating all my jQuery plugins into one file is ineffective?