vite插件介绍 - vite-plugin-meta-env

vite环境变量插件介绍 - vite-plugin-meta-env

a vite plugin, define dynamic env variables in import.meta.env

npm

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 来访问我们定义的环境变量了

demo

预览

三、注意项

TypeScript 的智能提示

对于使用 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
}

---

author