vite-plugin-env-parser

Why?

When you add the environment variable in .env file, no matter what value you set, you can only get a string value through import.meta.env. So this plugin can helps you automatically convert variable types.

Install

pnpm add vite-plugin-env-parser -D

add plugin in vite.config.ts

import { defineConfig } from 'vite'
import envParser from 'vite-plugin-env-parser'

export default defineConfig({
  plugins: [
    // ...
    envParser({ /* options */ })
  ]
})

Configuration

envParser({
  // filepath to generate .d.ts for `vite-env`
  // defaults to 'src/env.d.ts' when set true
  // set false to disable
  dts: true,

  // inject `/// <reference types="vite/client" />` in .d.ts
  // does not take effect when dts is not set or set to false
  injectViteDTS: true
})

Usage

example: .env file

VITE_APP_TITLE=Hello World!

VITE_PORT=3000

VITE_DROP_CONSOLE=true

VITE_DROP_CONSOLE_STRING=true|string # force convert to string

VITE_MY_LIKES=["sing", "dance", "rap", 666]

VITE_MY_LIKES_STRING=["sing", "dance", "rap", 666]|string[] # force convert to array of string

then you can import and use it by vite-env. like this:

import { VITE_PORT, VITE_APP_TITLE } from 'vite-env'

console.log(VITE_APP_TITLE) // log 'Hello World!', string
console.log(VITE_PORT) // log 3000, number
console.log(VITE_DROP_CONSOLE) // log true, boolean
console.log(VITE_DROP_CONSOLE_STRING) // log 'true', string
console.log(VITE_MY_LIKES) // log '["sing", "dance", "rap", 666]', string
console.log(VITE_MY_LIKES_STRING) // log ["sing", "dance", "rap", "666"], string[]

By default, values of the base type are automatically converted by JSON.stringify. you also can set force type. supported string、number、boolean、string[]、number[]、boolean[]

but in vite.config.ts, vite-env is not working. you can resolved it like this:

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import envParser, { parse } from 'vite-plugin-env-parser'

export default defineConfig(({ mode }) => {
  const root = process.cwd()
  const envPrefix = ['VITE_', 'APP_']
  const { VITE_PORT } = parse(loadEnv(mode, root, envPrefix))
  return {
    root,
    envPrefix,
    plugins: [
      vue(),
      envParser({
        dts: true, // or set .d.ts filepath. eg. 'src/vite-env.d.ts'
        injectViteDTS: true // inject `/// <reference types="vite/client" />`
      })
    ],
    server: {
      port: VITE_PORT
    }
  }
})

Example Usage