vite-plugin-vue-env

Vite-plugin-vue-env

Provide VUE_APP_* env variables to Vite app.

Installation

npm i -D vite-plugin-vue-env

vite.config.ts

import { defineConfig } from 'vite';
import pluginEnv from 'vite-plugin-vue-env';

export default defineConfig({
  plugins: [
    pluginEnv(),
  ],
});

Add .env file with any VUE_APP_*

Configuration

pluginEnv(variables?, options?)

Variables

Additional variables that will be 'added' to the code, next to .env

• type: object
• default: {}

pluginEnv({
  APP_ENV: 'development'
})

// [in code] > console.log(process.env.APP_ENV)

Options

• fileRegexp: Use this plugin only on files that match this regexp

  • type: RegExp
  • default: /\.(m?jsx?|tsx?|vue)$/i

  pluginEnv({}, {
    fileRegexp: /\.js$/i, // the plugin will be available only in .js files
  })
  

• getEnvFullName: Customize replaceable string

  • type: function
  • default: (name: string) => 'process.env.${name}'

  pluginEnv({}, {
    getEnvFullName: (name: string) => `ENV.${name}`,
  })
  
  // [in code] > console.log(ENV.VUE_APP_ENDPOINT)
  

• variablePrefix: Customize variable prefix

  • type: string
  • default: VUE_APP_

  pluginEnv({}, {
    variablePrefix: 'VUE_',
  })
  
  // [in code] > console.log(process.env.VUE_ENDPOINT)
  

• debug: Print all variables to the console

  • type: boolean
  • default: false

How it works

Simple, maybe stupid

code.replace('process.env.var', 'value')