Svelte 框架：环境变量未出现在 svelte 应用程序中答案

【问题标题】：Svelte framework: environment variables not appearing in svelte appSvelte 框架：环境变量未出现在 svelte 应用程序中
【发布时间】：2020-07-21 01:18:17
【问题描述】：

我正在尝试在我的苗条应用程序中使用环境变量。我已经安装了@Rollup/plugin-replace 和dotenv。我创建了一个.env 文件来保存我的API_KEY，并将以下内容添加到rollup.config.js 中的plugins 从这个Medium article：

plugins: [
  replace({
    __myapp: JSON.stringify({
      env: {
        isProd: production,
        API_URL : process.env.API_URL
      }
    }),
  }),
]

在我的应用程序的精简组件中，我将通过

访问我的 API 密钥

const apiUrl = __myapp.env.API_URL

这很有效。但是，几天后我遇到了身份验证问题，经过一些调试后，我发现 __myapp.env.API_URL 通过尝试将其打印到控制台返回 undefined。

然后我尝试将replace 调用更改为仅replace({'API_KEY': process.env.API_KEY}) 和console.log(API_KEY) 仍然显示undefined。我测试了replace，尝试使用它用一些字符串替换一些变量并且它工作，以便确认汇总工作正常。所以，我怀疑问题出在process.env.API_KEY，但我不确定。我尝试访问我的环境变量时可能做错了什么？

（一些背景知识：我正在使用sveltejs/template 作为模板来构建我的应用程序）

【问题讨论】：

我不熟悉 svelte，但我会大胆猜测，也许您只需要对 env 变量值进行字符串化。比如：__myapp: { env: { isProd: JSON.stringify('production') } }
@duxfox-- 嗯，只是试了一下，但没有成功。感谢您的回复。

标签： javascript environment-variables svelte rollupjs

【解决方案1】：

在您调用 config 之前，dotenv 不会注册您的 .env 变量，这就是为什么当您尝试访问它时 process.env.API_KEY 未定义。

在你的rollup.config.js 你可以这样做：

import { config as configDotenv } from 'dotenv';
import replace from '@rollup/plugin-replace';

configDotenv();

export default {
   input: 'src/main.js',
   ...
   plugins: [
    replace({
      __myapp: JSON.stringify({
        env: {
          isProd: production,
          API_URL: process.env.API_URL,
        },
      }),
    }),
    svelte({ ... })
   ]
}

【讨论】：