javascript - 在函数中使用时为 "process is not defined"(Vue/Quasar)

Question

以下代码片段代表我的 Vue 3/Quasar 2 应用程序中的 Pinia 商店。此存储使用环境变量 VUE_APP_BACKEND_API_URL，该变量应从 window 对象或 process.env 读取。

但是我不明白为什么第一个变体是 wokring 而第二个变体不是。使用 getEnv 函数总是会导致 Uncaught (in Promise) ReferenceError: process is not Defined 错误。

import { defineStore } from 'pinia';

function getEnv(name) {
  return window?.appConfig?.[name] || process.env[name];
}

// 1. this is working
const backendApiUrl = window?.appConfig?.VUE_APP_BACKEND_API_URL || process.env.VUE_APP_BACKEND_API_URL;

// 2. this is NOT working
const backendApiUrl = getEnv('VUE_APP_BACKEND_API_URL');

export const useAppConfigStore = defineStore('appConfig', {
  state: () => ({
    authorizationUrl: new URL(
      '/oauth2/authorization/keycloak',
      backendApiUrl,
    ).toString(),
    logoutUrl: new URL('/logout', backendApiUrl).toString(),
    backendApiUrl: new URL(backendApiUrl).toString(),
  }),
});

Answer 1

特定于 NodeJS 的内容，例如 process不存在于浏览器环境中。 Webpack 和 Vite 实现都是通过替换 process.env.XYZ 来实现的表达式及其在构建时间上的值。所以，就process.env ，或process.env[name]不会被替换，这将导致您遇到的错误。请参阅caveats部分以及相关的 Webpack/Vite 文档和资源。因此，不幸的是，唯一简单的方法似乎是您尝试过的第一个漫长且重复的方法( const backendApiUrl = window?.appConfig?.VUE_APP_BACKEND_API_URL || process.env.VUE_APP_BACKEND_API_URL; )。您可以尝试将此逻辑嵌入到单个对象中，然后使用该函数来访问它。

const config = {
  VUE_APP_BACKEND_API_URL: window?.appConfig?.VUE_APP_BACKEND_API_URL || process.env.VUE_APP_BACKEND_API_URL
}

export function getEnv(name) {
  return config[name];
}

这样第一次定义它会更长、更重复，但至少你将能够通过代码库轻松使用它。