如何在Quasar Framework中从docker compose获取环境变量？

Quasar允许您通过的build.env属性传递自定义环境变量quasar.conf.js。

Quasar App CLI v2 +

{
    // ...
    build: {
        env: {
            OAUTH_CLIENT: process.env.OAUTH_CLIENT,
            OAUTH_CLIENT_KEY: process.env.OAUTH_CLIENT_KEY),
            BACKEND_HOSTNAME: process.env.BACKEND_HOSTNAME,
            BACKEND_PORT: parseInt(process.env.BACKEND_PORT),
        }
    }
}

现在，您将可以在类星体应用程序中使用env变量：

console.log(process.env.APP_OAUTH_CLIENT);
// note, that
console.log(process.env);
// won't work as you might expect

v2之前的Quasar App CLI

您可以这样简单：

{
    // ...
    build: {
        env: {
            OAUTH_CLIENT: JSON.stringify(process.env.OAUTH_CLIENT),
            OAUTH_CLIENT_KEY: JSON.stringify(process.env.OAUTH_CLIENT_KEY),
            BACKEND_HOSTNAME: JSON.stringify(process.env.BACKEND_HOSTNAME),
            BACKEND_PORT: process.env.BACKEND_PORT, // this will be integer at runtime!
        }
    }
}

或批量传递所有内容：

{
    // ...
    build: {
        env: Object.fromEntries(Object.entries(process.env)
            /* Filter variables which you want to pass to quasar, for example only pass variables starting with APP_ */
            .filter(([ key, value ]) => /^APP_/.test(key))
            /* Enquote strings so that they remain strings when inlined to source code by quasar */
            .map(([ key, value ]) => [ key, JSON.stringify(value) ])
        )
    }
}

现在，您将可以在类星体应用程序中使用env变量：

console.log(process.env);
console.log(process.env.APP_OAUTH_CLIENT);

不过有几点注意事项

首先，强烈建议您过滤传递给类星体应用程序的变量，即对公共作用域的含义。

默认情况下，vue-cli会执行类似的操作：

请注意，只有NODE_ENV，BASE_URL和以开头的变量VUE_APP_将被静态嵌入到客户端捆绑包中（来自vue-cli guide）。

Quasar不会开箱即用地嵌入任何内容，但是可以让您完全控制使用它的build.envconfig属性嵌入什么以及如何嵌入。

其次，请注意，当您传递{ BACKEND_HOSTNAME: "localhost" }变量然后像拟使用类将其按原样var h = process.env.BACKEND_HOSTNAME;静态替换它一样使用它时，不要尝试以某种方式序列化该值，因此它的结果为，这不是有效的JS，您可能会收到语法错误。相反，如果您出于安全考虑，建议您在传递给quasar配置时将所有env值序列化为字符串，这样就变成了。localhost var h = localhostJSON.stringifyvar h = process.env.BACKEND_HOSTNAME;var h = "localhost"

我还发现定义一个专门的模块来处理环境变量很有用：

export default {
    oauthClient: process.env.OAUTH_CLIENT,
    oauthClientKey: process.env.OAUTH_CLIENT_KEY,
    backendHostname: process.env.BACKEND_HOSTNAME,
    backendPort: process.env.BACKEND_PORT,
    debug: process.env.DEBUG === 'true'
}

这样，所有环境导入都具有一个入口。但是请注意，它不提供代码剥离：

import myenv from './myenv';
if (myenv.debug) {
    console.log('We are debugging something');
}

此代码永远不会被剥离。要使用代码剥离，您必须使用process.env.DEBUG === "true"符号，因此将其替换为"false" === "true"类星体，然后将其作为不可访问的代码块以代码捆绑器的形式剥离。