Как я могу использовать переменные Vite env в vite.config.js?

Question

Со следующими .env в моем проекте Vite:

      # To prevent accidentally leaking env variables to the client, only
# variables prefixed with VITE_ are exposed to your Vite-processed code

VITE_NAME=Wheatgrass
VITE_PORT=8080

Как я могу использовать VITE_PORT в моем vite.config.js?

Answer 1

Вы можете загрузить app level переменные env и добавьте их в Node level переменные env:

      import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';


export default ({ mode }) => {
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};

    // import.meta.env.VITE_NAME available here with: process.env.VITE_NAME
    // import.meta.env.VITE_PORT available here with: process.env.VITE_PORT

    return defineConfig({
        plugins: [vue()],

        server: {
            port: process.env.VITE_PORT,
        },
    });
}

Answer 2

Если приведенное выше решение @matt не работает для вас, изменитеvite.config.ts/vite.config.jsкак ниже

1-е решение

      import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig(({ mode }) => {

const env = loadEnv(
  'mock', 
  process.cwd(),
  '' 
)
  const processEnvValues = {
    'process.env': Object.entries(env).reduce(
      (prev, [key, val]) => {
        return {
          ...prev,
          [key]: val,
        }
      },
      {},
    )
  }

  return {
    plugins: [vue()],
    define: processEnvValues
  }
}

2-е решение

      import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';


export default ({ mode }) => {
    process.env = Object.assign(process.env, loadEnv(mode, process.cwd(), ''));

    return defineConfig({
        plugins: [vue()],
    });
}

Answer 3

Если вы ищете более простое решение, вы можете сделать что-то вроде этого:

      import { defineConfig, loadEnv } from 'vite';

const env = loadEnv(
    'all',
    process.cwd()
);

let port = env.VITE_PORT;

The loadEnvподпись типа подробно описана ниже:

      function loadEnv(
  mode: string,
  envDir: string,
  prefixes: string | string[] = 'VITE_',
): Record<string, string>

По умолчанию только переменные env с префиксомVITE_загружаются, если толькоprefixesизменено.

Answer 4

Вы можете использовать dotenv

https://github.com/motdotla/dotenv#readme

в вашейvite.config.js

      import dotenv from 'dotenv'

dotenv.config()

process.env.YOUR_ENV_VAR 

Answer 5

Возможно, это может быть полезно для тех, кто работает с React и Vite.

vite.config.js

      import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
// export default defineConfig({
//   plugins: [react()],
// })

export default defineConfig(({ mode }) => {
  const env = loadEnv("mock", process.cwd(), "");
  const processEnvValues = {
    "process.env": Object.entries(env).reduce((prev, [key, val]) => {
      console.log(key, val);
      return {
        ...prev,
        [key]: val,
      };
    }, {}),
  };

  return {
    plugins: [react()],
    define: processEnvValues,
  };
});

Как ТЕСТИРОВАТЬ:

1.- Добавьте эти переменные в новый файл .env или .env.local.

      REACT_APP_MAILCHIMP_URL="https://gmail.xxxx.com/subscribe/post"
REACT_APP_MAILCHIMP_U="xxxxxxxxxxxxxxxxx"
REACT_APP_MAILCHIMP_ID="YYYYYYYYYYYY"

2.- Добавьте новый компонент компонента / файл Test.js.

      export const Test = () => {
  console.log(import.meta.env.REACT_APP_MAILCHIMP_URL); 
  console.log(import.meta.env.REACT_APP_MAILCHIMP_U); 
  console.log(import.meta.env.REACT_APP_MAILCHIMP_ID); 

  const a_var = `${process.env.REACT_APP_MAILCHIMP_URL}`;
  console.log(a_var);

  return (

    <div>
      <small> You are running this application in mode.: 
      <b>{process.env.NODE_ENV}</b>
      </small>

      <div>
        <small> REACT_APP_NOT_SECRET_CODE:  
        <b> {process.env.REACT_APP_MAILCHIMP_URL}</b>
        </small>
      </div>
    </div>
  );
};

3.- Добавьте тестовый компонент в файл App.js.

      import "./App.css";

import { Test } from "./components/Test";

function App() {
  return (
    <div className="App">
      <Test />
    </div>
  );
}

export default App;

Answer 6

Если кто-то использует env-файлы на основе имени проекта Firebase, такие как .env.yourapp-prod и .env.yourapp.dev, вы можете перенести эти переменные времени выполнения в vite, чтобы сделать их доступными для таких сборок:

      import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { resolve } from 'path';
import dotenv from 'dotenv';
import fs from 'fs';

export default defineConfig(() => {
  // Decide which .env file to load based on the mode

  const envFile = process.env.NODE_ENV === 'production' ? 'env.yourapp-prod' :'.env.yourapp-dev';
  // Load the environment variables using dotenv and assign to process.env
  const envConfig = dotenv.parse(fs.readFileSync(envFile));
  process.env = { ...process.env, ...envConfig };

  // Convert environment variables for Vite's define option
  const envVarsForDefine = Object.fromEntries(
    Object.entries(process.env).map(([key, value]) => [`process.env.${key}`, JSON.stringify(value)])
  );


  return {
    plugins: [sveltekit()],
    test: {
      include: ['src/**/*.{test,spec}.{js,ts}']
    },
    resolve: {
      alias: {
        $src: resolve('./src'),
        $stores: resolve('./src/lib/stores'),
        $assets: resolve('./src/assets'),
        $icon: resolve('./node_modules/svelte-bootstrap-icons/lib')
      }
    },
    define: envVarsForDefine
  };
});

Затем разверните свое приложение следующим образом:

NODE_ENV=staging firebase deploy

или

NODE_ENV=production firebase deploy