React/Vue プロジェクトの vite.config.ts はさまざまな .env 環境変数をロードします

Vite ドキュメントのリンク

vite の環境変数は 特別なオブジェクト上にあり、デフォルトでは、接頭辞 VITE_ が付いた環境変数のみがロードされます。

vite.config.ts および js での vite の設定は、目的の環境変数を直接取得できません。vue -cliスキャフォールディングのようにprocess.env.xxx によって 直接取得することも、import.meta.env によって直接使用することもできません。 xxx

メイン設定コード 

// vite.config.js
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import path, { resolve } from "path";

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    base: env.VITE_PROJECT_BASE,
    server: {
      host: "0.0.0.0", //解决 vite use--host to expose
      port: 8888, //配置端口
      open: true, //配置默认打开浏览器
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"), //配置@别名
      },
    },
    plugins: [react()],
  });
};