Vite

Use Env Vars in Vite

Install vite-plugin-html-env with

pnpm add vite-plugin-html-env
# or
yarn add vite-plugin-html-env
# or
npm i vite-plugin-html-env

In vite.config.js add:

import VitePluginHtmlEnv from "vite-plugin-html-env";
// ...

export default defineConfig({
  // ...
  build: {
    // ...
    plugins: [
      VitePluginHtmlEnv({
        compiler: true,
      }),
    ],
    // ...
  },
});

Usage:

<script
  vite-if="import.meta.env.VITE_ENV === dev || import.meta.env.VITE_ENV === stage"
>
  <!-- ... -->
</script>