https://github.com/wei-design/vite-plugin-meta-env

define dynamic env variables in import.meta.env
https://github.com/wei-design/vite-plugin-meta-env

import-meta-env vite vite-plugin vite-plugin-meta-env vue3

Last synced: 4 days ago
JSON representation

define dynamic env variables in import.meta.env

• Host: GitHub
• URL: https://github.com/wei-design/vite-plugin-meta-env
• Owner: wei-design
• Created: 2023-07-14T01:56:11.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-09-11T11:44:37.000Z (over 1 year ago)
• Last Synced: 2025-01-18T11:39:14.735Z (23 days ago)
• Topics: import-meta-env, vite, vite-plugin, vite-plugin-meta-env, vue3
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/vite-plugin-meta-env
• Size: 315 KB
• Stars: 8
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# vite-plugin-meta-env

English | [简体中文](https://github.com/wei-design/vite-plugin-meta-env/blob/master/readme.zh-CN.md)

[![vite-plugin-meta-env](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli)

[![vite-plugin-meta-env](https://img.shields.io/npm/v/vite-plugin-meta-env.svg)](https://www.npmjs.org/package/vite-plugin-meta-env)

[![vite-plugin-meta-env](https://img.shields.io/npm/dt/vite-plugin-meta-env)](https://www.npmjs.org/package/vite-plugin-meta-env)

define dynamic env variables in `import.meta.env`

## 1、Intro

This plugin is used in [vite](https://cn.vitejs.dev/) , Expose **dynamic** or **without prefix** environment variables in the project

### Usage

- a、**dynamic** environment variables

- b、**without prefix** environment variables

---

In `vite` projects, the environment variable is usually exposed which is starting with [envPrefix](https://cn.vitejs.dev/config/shared-options.html#envprefix) The default is `VITE_`,

such as: `VITE_API_URL`, `VITE_APP_NAME` and so on.

But sometimes you need to use some **dynamic environment variables** and **variables without prefix** such as: `APP_VERSION`, `APP_BUILD_TIME` and so on.

This plugin is born to solve this problem.

Here we use the `config` and `define` configuration options unique to `vite` to complete this function

## 2、Usage

### Install

```bash

pnpm add vite-plugin-meta-env -D

```

### Config

`VitePluginMetaEnv` receives two parameters:

```ts

/**

 * Use the define option to expose a variable without a prefix

 * @param {EnvVars} Vars environment variable object

 * @param defineOn Variable Definition Location

 */

```

- The first parameter: environment variable object, `key` is the variable name, `value` is the variable value.

- The second parameter: variable definition location, optional `import.meta.env` or `process.env`

```ts

// vite.config.js

import { defineConfig } from 'vite'

// import plugin

import VitePluginMetaEnv from 'vite-plugin-meta-env'

export default () => {

    // environment variables, object structure

    const metaEnv = {

        APP_VERSION: '1.0.0'

    }

    return defineConfig({

        // ...

        plugins: [

            // use plugin

            VitePluginMetaEnv(metaEnv, 'import.meta.env'),

            // VitePluginMetaEnv(metaEnv, 'process.env'),

        ]

    })

}

```

in the project, you can access the environment variables we defined through `import.meta.env.APP_VERSION`

[demo](https://github.com/wforguo/vue3-quick-start/blob/master/vite.config.ts)

[preview](https://wforguo.github.io/vue3-quick-start/)

## 3、warning

[TypeScript tips](https://cn.vitejs.dev/guide/env-and-mode.html#intellisense)

to ensure type checking and code hints, please add type declarations in `env.d.ts` or `vite-env.d.ts`

```ts

// env.d.ts

/// 

interface ImportMetaEnv {

    readonly BASE_URL: string // Built-in variable

    readonly MODE: string // Built-in variable

    readonly APP_VERSION: string

    // more...

}

interface ImportMeta {

    readonly env: ImportMetaEnv

}

```

---

[author](https://github.com/wforguo)