vite-env-config

A Vite plugin to generate config.js from .env file

Install

npm install vite-env-config -D
# or
yarn add vite-env-config -D
# or
pnpm install vite-env-config -D

Use

Assuming you have two env configuration files for the development environment and the build environment

.env.development

//.env.development
VITE_BASE_URL = /api
VITE_MODE = development

.env.production

//.env.production
VITE_BASE_URL = https://domain.com
VITE_MODE = production

Configuration plugin in vite.config.js

import viteEnvConfig from 'vite-env-config'

export default defineConfig({
    plugins: [
        viteEnvConfig(['VITE_BASE_API'])
    ]
})

After building, a config. js file will be generated in the dist directory, with the following content.

window.config = {BASE_API:'https://domain.com'}

Please use it in the following way in the code:

let baseUrl = import.meta.env.MODE === 'production' ? window.config.BASE_API : import.meta.env.VITE_BASE_API;
//axios config
const instance = axios.create({
  baseURL: baseUrl,
  timeout: 1000,
});