javascript - Import.meta.env 在生产构建 vitejs 上未定义

Question

我正在使用 vitejs 静态编译我的 react 应用程序，但是在构建 .env 导入之后变得未定义，这在开发阶段并非如此。
阅读文档我发现这些变量被它们对应的值替换，但是在提供它之后查看开发工具中的源/编译代码时，会显示一个带有 env 名称/键的空对象

我可能在 vite.config.ts 中有错误的配置，所以在这里。

//vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { getAliases } from 'vite-aliases';

const aliases = getAliases({
  path: 'src',
  prefix: '@',
});

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

  const plugins = mode === 'development' ? [reactRefresh()] : [];
  return defineConfig({
    plugins,
    publicDir: 'src/assets',
    resolve: {
      alias: aliases,
    },
    build: {
      chunkSizeWarningLimit: 1500,
    },
  });
};

还有我引用这些环境变量的代码

//config.ts
export const config = () => {
  const url = import.meta.env.VITE_SERVER_URL;
  const api = import.meta.env.VITE_API_ENDPOINT;
  const auth = import.meta.env.VITE_AUTH_ENDPOINT;

  const isProd = import.meta.env.MODE === 'production';
  const isDev = import.meta.env.MODE === 'development';

  console.log(url, api, auth);
  return {
    api: (endpoint: string) => `${url}${api}${endpoint}`,
    auth: (endpoint: string) => `${url}${auth}${endpoint}`,
    test: (endpoint: string) => `${url}test${endpoint}`,
    isProd,
    isDev,
  };
};

Answer 1

我刚刚意识到 ViteJS 文档所说的内容，我会留下它，以防有人也遭受这种痛苦。