Viteでprocess.envを使う方法

はじめに

Viteで環境変数を使うのにimport.metaを使わずにprocess.envを使いたかったのでまとめます

やり方

vite.config.tsに以下を追加します

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
+ import env from "vite-plugin-env-compatible";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
    react(),
+   env({ prefix: "VITE",  mountedPath: "process.env" }) 
  ],
});

そして必要なライブラリをインストールします

$ npm i --save-dev vite-plugin-env-compatible

これで通常通りprocess.envが利用できるようになります

もしdotenvの読み込みの設定を行なっていない場合はそれも併せてやりましょう

おわりに

import.meta...を使うのが微妙だったので解決できてよかったです