使用参数动态访问环境变量答案

【问题标题】：Access env variable dynamically with parameter使用参数动态访问环境变量
【发布时间】：2021-11-09 10:50:18
【问题描述】：

我正在尝试编写一个仅返回 env 变量内容的小型 Vue 插件。类似于 PHP 的 env() 方法。上下文：我需要多个组件中的 url，显然我把它放在 .env 文件中，因为它将来可能会改变。你不能在组件模板中使用process.env，因为：Property or method "process" is not defined on the instance but referenced during render.

这是我迄今为止尝试过的：我在一个挂载的钩子中调用原型函数，如下所示： console.log('test: ' + this.env('MIX_COB_PARTNER_URL'));

import _get from "lodash/get";

const Env = {
    // eslint-disable-next-line
    install(Vue, options) {
        Vue.prototype.env = function (name) {
            console.log(name); // "MIX_VARIABLE"
            console.log(typeof name); // string

            // variant 1
            return process.env[name]; // undefined

            // variant 2
            return process.env["MIX_VARIABLE"]; // "works" but isnt dynamic obviously

            // variant 3-5 with lodash
            return _get(process.env, name); // undefined
            // or
            return _get(process, 'env[' + name + ']'); // undefined
            // or
            return _get(process.env, '[' + name + ']'); // undefined, worth a try lol
            
            // variant 6
            const test = "MIX_VARIABLE"
            return process.env[test]; // again just for the sake of trying
        }
    }
}

export default Env;

我知道通常object[variable] 工作正常。但不知何故，在这种情况下它不会，也许它与process.env 在没有密钥的情况下访问时为空并且[name] 与.MIX_VARIABLE 一样“直接”这一事实有关。

这是行不通的吗？我研究并发现一些人（例如这里的 SO）建议这种类型的访问（process.env[variable]）所以我不确定。

【问题讨论】：

也许开始增强你的 JS 将是你能做的最好的事情。如果您使用的是像 vitejs 这样的构建工具，那么通过 process.env 或 vite 建议的 import.meta 访问应该不是问题。如果你只在浏览器中运行它，你可以为此设置一个全局常量。因为如果您可能知道浏览器（客户端）和服务器（后端）有 JS，那么您没有声明。由于 process 是 nodejs 提供的全局变量，并且它从未在浏览器中预定义。
@mentorgashi 问题一般与 process.env 无关。它通常工作正常。它关于动态检索环境变量。我使用 Laravel Mix 和 VueJS，我不能只是切换构建工具，因为像这样的小东西。为什么 object[variable] 可以工作，而 process.env[variable] 不行？
idk 你可以试试， const someVar = Object.assign({}, process.env);然后 someVar[变量]
不幸的是不能工作...
@beefony 你让这个工作了吗？我正在尝试做同样的事情。看起来 Vue 在代码文本中搜索/替换了环境变量名称，这就是为什么你写的东西不起作用的原因。 (cli.vuejs.org/guide/…) 我怀疑答案是“行不通”，但我希望有一个替代方案。

标签： javascript vue.js vuejs2 environment-variables javascript-objects

【解决方案1】：

我相信您的环境变量名称需要以VUE_APP_ 开头，以便被 Vue 的环境变量处理拾取。那么，也许将MIX_VARIABLE 重命名为VUE_APP_MIX_VARIABLE？（见https://cli.vuejs.org/guide/mode-and-env.html#environment-variables）

【讨论】：