Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (10 months ago)
- Default Branch: master
- Last Pushed: 2023-09-11T11:44:37.000Z (8 months ago)
- Last Synced: 2024-03-26T23:05:34.897Z (about 2 months 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
Lists
- awesome-vite - vite-plugin-meta-env - Define dynamic env variables in import.meta.env. (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-meta-env
English | [简体中文](https://github.com/wei-design/vite-plugin-meta-env/blob/master/readme.zh-CN.md)
[](http://commitizen.github.io/cz-cli)
[](https://www.npmjs.org/package/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)