如何在 Quasar 中使用 CloudFlare Worker 环境变量？ (Vue)答案

【问题标题】：How to use a CloudFlare Worker Environment Variable in Quasar? (Vue)如何在 Quasar 中使用 CloudFlare Worker 环境变量？ (Vue)
【发布时间】：2022-01-06 11:44:13
【问题描述】：

你好，新年快乐！

我的 Quasar (v1) 应用程序在环境变量方面遇到问题。我不想使用 dotenv 或任何其他 Node 包来解决这个问题，因为这些不再是在 Quasar 中使用环境变量的推荐方法。

所以我有一些我正在设置/使用的本地环境变量，遵循 Quasar 官方文档中记录的最佳实践：

quasar.conf.js：

    build: {
      env: {
          EXAMPLE: ctx.dev
          ? JSON.stringify('https://dev.')
          : JSON.stringify('https://prod.')
      },

这让我可以按照我的预期在 dev 和 prod 中指定不同的端点，但由于一些明显的原因并不理想。

index.vue:

console.log(process.env.EXAMPLE,'<---API')

我得到了我的模拟 API 端点的预期输出。很好。

现在 CloudFlare Workers 的变量是全局范围的（没有 process.env 对象），所以一旦在 wrangler.toml 中配置，应该可以简单地按名称调用它们：

wrangler.toml:

[vars]
CFEXAMPLE = "example_token"

但这不起作用（如果我按如下方式包含它，我将无法构建我的 Quasar 应用程序）。可能是因为我的 quasar.conf.js 中没有定义 CFEXAMPLE

quasar.conf.js：

    build: {
      env: {
          CFEXAMPLE: CFEXAMPLE
      },

我也无法从我的 index.vue 文件中 console.log CFEXAMPLE（但我可以构建我的应用程序并部署到 CloudFlare OK）。

请让环境变量在 CloudFlare 和 localhost 上正常工作的最佳方法是什么？

谢谢

【问题讨论】：

冒着回答我自己问题的风险，是因为我必须在构建时在 SPA 应用程序中指定我的环境变量吗？理想的方法是将它们全部放在一个单独的文件中并 .gitignore 吗？（我在部署到 CloudFlare Workers 之前在本地构建）
SPA 中的 ENV 变量几乎总是基于构建的。不管我们谈论的是 Webpack、Vite 还是 Quasar（现在基于 Weback），ENV 变量总是在构建时直接在代码中被相应的值替换（例如，在运行时没有已知的 process.env.EXAMPLE 变量 -在浏览器中）

标签： vue.js cloudflare quasar-framework cloudflare-workers

【解决方案1】：

好的，感谢 Michal 的提示。最后我做到了：

首先创建一个environment.js。

环境.js：

module.exports = {
    dev:{
        NODE_ENV: 'development',
        PROXY_URL: 'xx',
        }
    },
    prod:{
        NODE_ENV: 'production',
        PROXY_URL: 'zz',
          }
    }
  }

接下来导入它并包含一个返回正确环境变量的函数。

quasar.conf.js：

const config = require('./src/boot/environment.js')
module.exports = function(ctx) {
  const getEnvVar = p => {
    if (ctx.dev) return (config.dev[p])
    else return (config.prod[p])
  }
...

最后给env添加环境变量：

quasar.conf.js：

      env:{
        PROXY_URL:JSON.stringify(getEnvVar('PROXY_URL')),
        POST_TO:JSON.stringify(getEnvVar('POST_TO')),
        FIRESTORE_CREDS:JSON.stringify(getEnvVar('FIRESTORE_CREDS')),
      },

【讨论】：