|
|
---
|
|
|
outline: deep
|
|
|
---
|
|
|
|
|
|
# Environment Variables
|
|
|
|
|
|
## Basic Workflow
|
|
|
|
|
|
Using environment variables in VitePress is essential for managing sensitive data such as API keys and service URLs.
|
|
|
VitePress allows you to load environment variables from `.env` files using the `loadEnv` function to load these variables into your configuration (e.g. `.vitepress/config.ts`).
|
|
|
|
|
|
### Step 1: Create the .env File
|
|
|
|
|
|
The first step in setting up environment variables is to create a `.env` file in the root directory of your VitePress project.
|
|
|
This file will store your sensitive information and configuration settings.
|
|
|
|
|
|
### Step 2: Defining Environment Variables
|
|
|
|
|
|
Open the `.env` file and define your environment variables.
|
|
|
Remember that in Vite, all environment variables that need to be exposed to your application must be prefixed with `VITE_.` Here’s an example of what your `.env` file might look like
|
|
|
|
|
|
```bash
|
|
|
VITE_ALGOLIA_APP_ID=your_algolia_app_id
|
|
|
VITE_ALGOLIA_API_KEY=your_algolia_api_key
|
|
|
VITE_ALGOLIA_INDEX_NAME=your_algolia_index_name
|
|
|
```
|
|
|
|
|
|
### Step 3: Load Environment Variables in VitePress Configuration
|
|
|
|
|
|
Next, you need to load these environment variables into your VitePress configuration. This is done using the `loadEnv` function from VitePress.
|
|
|
|
|
|
```js
|
|
|
import { loadEnv } from 'vitepress';
|
|
|
|
|
|
// Load environment variables
|
|
|
const env = loadEnv('', process.cwd());
|
|
|
```
|
|
|
|
|
|
### Step 4: Accessing Environment Variables in Your Application
|
|
|
|
|
|
for example, configuring your blog to use Algolia
|
|
|
|
|
|
```js
|
|
|
import { loadEnv } from 'vitepress';
|
|
|
import { defineConfig } from 'vitepress';
|
|
|
|
|
|
// Load environment variables
|
|
|
const env = loadEnv('', process.cwd());
|
|
|
|
|
|
export default defineConfig({
|
|
|
themeConfig: {
|
|
|
search: {
|
|
|
provider: 'algolia',
|
|
|
options: {
|
|
|
appId: env.VITE_ALGOLIA_APP_ID,
|
|
|
apiKey: env.VITE_ALGOLIA_API_KEY,
|
|
|
indexName: env.VITE_ALGOLIA_INDEX_NAME,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
|
|
|
```
|
|
|
|
|
|
## Important Considerations
|
|
|
|
|
|
- **Prefix Requirement**: Ensure all relevant environment variables are prefixed with `VITE_`. Only these will be accessible in your application.
|
|
|
- **File Loading Order**: Vite loads `.env` files based on specific priorities. For example, `.env.production` will override settings from `.env`.
|
|
|
- **Restarting Your Server**: After making changes to your `.env` file, restart your VitePress server for changes to take effect.
|
