Embed environment variables as global constants for local js files.
npm install vite-define-envs-pluginvite-define-envs-plugin will read from Node's process.env and define specific environment variables as global constants for client JavaScript.sh
npm install --save-dev vite-define-envs-plugin
`arguments
- keys - array of keys to read from process.env.
- scope - scope of the global constants. Default to "process.env" if not set.how to use
`js
// vite.config.jsimport viteDefineEnvs from "vite-define-envs-plugin";
export default {
plugins: [
new viteDefineEnvs(["USER", "API_BASE_URL"], "GLOBAL")
]
};
// your .js file
const appEnv = GLOBAL.USER;
const apiUrl = GLOBAL.API_BASE_URL;
`avoid using process.env scope
It's not recommended to use process.env scope since it's not the same process.env that Node uses.Local js files don't know about
process.env, so the environment variables have to be processed and embedded by vite during the build time. On the other hand, in a Node application, process.env is a Node` module and is injected at runtime.