How do i set dynamic base url in vuejs app?

Setting a dynamic Base URL in Vue.js applications primarily relies on environment variables. This approach enables you to dynamically adjust the API base path based on different deployment environments (such as development, testing, and production). Here are the specific steps and examples:

Step 1: Using Environment Variables

First, create a series of .env files in the root directory, such as:

• .env — Default environment
• .env.development — Development environment
• .env.production — Production environment

In these files, define environment-specific variables. For example:

plaintext
# .env.development
VUE_APP_API_BASE_URL=http://dev-api.example.com/

# .env.production
VUE_APP_API_BASE_URL=https://api.example.com/

Step 2: Referencing Environment Variables in Vue Applications

Within Vue applications, access these variables via process.env. For instance, when using Axios for HTTP requests, configure the baseURL during instance creation:

javascript
import axios from 'axios';

const apiClient = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL
});

export default apiClient;

Step 3: Configuration and Usage

Ensure your development and production environments correctly load the respective .env files. If you used Vue CLI to create the project, it natively supports .env file loading. Simply specify the correct mode (development or production) when running or building the application.

Example

When running the application in development mode, Axios automatically uses http://dev-api.example.com/ as the base URL. In production, it switches to https://api.example.com/.

This method provides flexibility in managing API base URLs across environments without hardcoding URLs in the code, simplifying maintenance and management.

Important Notes

• Ensure .env files are excluded from version control systems (e.g., Git). Add .env* to your .gitignore file to prevent accidental commits.
• Environment variable names must start with VUE_APP_, as required by Vue CLI to ensure client-side accessibility.

By following these steps, you can effectively set and manage the Base URL dynamically in your Vue.js application.