动态访问带有参数的env变量

Question

我正在尝试编写一个只返回env变量内容的小Vue插件。类似于PHPs的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])，所以我不确定。

Answer 1

我相信您的环境变量名需要从VUE_APP_开始，以便被Vue的环境变量处理所获取。那么，也许把MIX_VARIABLE重命名为VUE_APP_MIX_VARIABLE？(见https://cli.vuejs.org/guide/mode-and-env.html#environment-variables)