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

Question

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

中读取

但是我不明白为什么第一个变体有效而第二个变体却没有。使用 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-specific 类似 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];
}

这样第一次定义会比较长和重复，但至少你可以通过代码库轻松使用它。

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

"process is not defined" when used in a function (Vue/Quasar)

javascript

vue.js

quasar-framework