javascript - Hvordan kan jeg bruke Vite miljøvariabler i vite.config.js?

Med følgende .env i mitt Vite-prosjekt:

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

Hvordan kan jeg bruke VITE_PORT i min vite.config.js?

Svar #1

Du kan laste inn app-nivå miljøvariabler og legge dem til Node-nivå miljøvariabler:

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: parseInt(process.env.VITE_PORT),
        },
    });
}

Svar #2

Jeg hadde nøyaktig det samme problemet og fant en løsning.

import { defineConfig, loadEnv } from 'vite';

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

  const API_URL = `${env.VITE_API_URL ?? 'http://localhost:3000'}`;
  const PORT = `${env.VITE_PORT ?? '3000'}`;

  return {
    server: {
      proxy: {
        '/api': API_URL,
      },
      port: PORT,
    },
    build: {
      outDir: 'public',
    },
    plugins: [react()],
  };
});

I .env

VITE_API_URL='https://yourapiurl.com'
VITE_PORT=3000

Svar #3

Hvis løsningen ovenfor av @matt ikke fungerer for deg, endre vite.config.ts/ vite.config.js som nedenfor

1. løsning

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. løsning

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()],
    });
}

Svar #4

Du kan bruke dotenv

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

i din vite.config.js

import dotenv from 'dotenv'

dotenv.config()

process.env.YOUR_ENV_VAR

Relaterte artikler