vite环境变量插件介绍 - vite-plugin-meta-env
a vite plugin, define dynamic env variables in import.meta.env
github 可以基于本仓库去开发自己的vite插件或者其他插件
一、介绍
该插件:用于在 vite 项目中暴露动态的或者不含前缀的环境变量
使用场景
-
1、动态的环境变量
-
2、不含前缀的环境变量
在 vite
项目当中,通常会暴露 envPrefix 【默认为 VITE_
】开头的环境变量,
如:VITE_API_URL
,VITE_APP_NAME
等等。
有时候则需要使用到一些动态的环境变量,以及不含前缀的变量如:APP_VERSION
,APP_BUILD_TIME
等等。
本插件就是为了解决这个问题而生的。
这里使用了 vite
独有钩子:config 以及 define 配置选项来完成该功能
二、使用
1、安装
pnpm add vite-plugin-meta-env -D
2、配置
VitePluginMetaEnv
接收两个参数:
/**
* 使用 define 选项,暴露一个不含前缀的变量
* @param {EnvVars} vars 环境变量对象
* @param defineOn 变量定义位置
*/
-
第一个参数:环境变量对象,
key
为变量名,value
为变量值。 -
第二个参数:变量定义位置,可选
import.meta.env
或者process.env
// vite.config.js
import { defineConfig } from 'vite'
// 引入插件
import VitePluginMetaEnv from 'vite-plugin-meta-env'
export default () => {
// 环境变量,对象结构
const metaEnv = {
APP_VERSION: '1.0.0'
}
return defineConfig({
// ...
plugins: [
// 添加插件
VitePluginMetaEnv(metaEnv, 'import.meta.env'),
// VitePluginMetaEnv(metaEnv, 'process.env'),
]
})
}
在项目当中就可以通过 import.meta.env.APP_VERSION
来访问我们定义的环境变量了
三、注意项
对于使用 TypeScript 的开发者来说,请确保在 env.d.ts 或 vite-env.d.ts 文件中添加类型声明,以获得类型检查以及代码提示。
// env.d.ts
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly BASE_URL: string // 内建变量
readonly MODE: string // 内建变量
readonly APP_VERSION: string
// 更多环境变量...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}