Viteを使用して.envファイルから環境変数をロードする方法 質問する

Viteを使用して.envファイルから環境変数をロードする方法 質問する

.envファイルから環境変数をロードしたいのですがヴィテ

私はimport.meta.envドキュメント

.envファイル:

TEST_VAR=123F

import.meta.env->経由でこの変数にアクセスしようとすると、import.meta.env.TEST_VARundefined が返されます。

それで、どうすればアクセスできるのでしょうか?

ベストアンサー1

によるドキュメント変数の前に次の接頭辞を付ける必要がありますVITE_:

誤って env 変数がクライアントに漏洩するのを防ぐため、VITE_ で始まる変数のみが Vite 処理コードに公開されます。

アプリのソースコード外( 内などvite.config.js)の env 変数にアクセスしようとしている場合は、 を使用する必要がありますloadEnv()

import { defineConfig, loadEnv } from 'vite';

export default ({ mode }) => {
    // Load app-level env vars to node-level env vars.
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};

    return defineConfig({
      // To access env vars here use process.env.TEST_VAR
    });
}

SvelteKitの場合

// vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig, loadEnv } from 'vite';

/** @type {import('vite').UserConfig} */
export default ({ mode }) => {
    // Extends 'process.env.*' with VITE_*-variables from '.env.(mode=production|development)'
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};
    return defineConfig({
        plugins: [sveltekit()]
    }); 
};

おすすめ記事