dotenv-webpack 在 webpack.config.js 中使用环境变量

2024-04-25

My .env设置如下:

SECRET_KEY=mysecretkey123

My webpack.config.js设置如下:

const Dotenv = require('dotenv-webpack');

module.exports = {
...
proxy: {
 'api': {
   target: 'foo.bar'
   headers: {'api_token': process.env.SECRET_KEY}
  }
}
...
plugins: [
    new Dotenv({
      path: '.env',
    }),
]

}

但是,当我运行我的应用程序时,我收到一条错误消息,指出我的 api 令牌是undefined

我知道 dotenv 工作正常,因为在我的应用程序本身中我可以做console.log(process.env.SECRET_KEY)并查看我的密钥,但是看起来这并没有暴露我的环境变量webpack.config.js文件本身。

有没有办法配置 dotenv-webpack 以允许在webpack.config.js?


如果您想直接在 webpack.config.js 中使用 .env 文件中的变量,请了解它在运行时的行为与任何其他 javascript 文件一样,因此您需要使用dotenv https://www.npmjs.com/package/dotenv直接在配置文件中打包,而不是 dotenv-webpack 插件,它将变量插入到捆绑的代码中。

即,只是npm install dotenv并添加require('dotenv').config()到 webpack.config 文件的顶部。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

dotenv-webpack 在 webpack.config.js 中使用环境变量 的相关文章

随机推荐

  • 快速排序和调整快速排序有什么区别?

    快速排序和调整快速排序之间的根本区别是什么 快速排序有何改进 Java 如何决定使用它而不是合并排序 正如蜥蜴比尔所说 调整的快速排序仍然具有与基本快速排序相同的复杂性 O N log N 平均复杂度 但调整的快速排序使用一些不同的方法来尝
  • UIScrollView 缩小具有 -ve 原点的视图

    我有一个 UIScrollView 在此我有一个 UIView 它的框架具有负原点 我需要限制滚动视图 以便您无法滚动整个视图 我已经在这个滚动视图中实现了缩放 缩放时 滚动视图将根据比例调整可缩放视图的大小 但它并不能调整原点 所以如果我
  • Python .NET WinForms - 如何将信息从文本框传递到按钮单击事件

    在回答我的问题之前 我正在 自学 学习 Python 和 NET CLR 如何相互交互 这是一次有趣的经历 但有时也是一次令人沮丧的经历 话虽如此 我正在使用 NET WinForm 它应该只是传递输入到文本框中的数据并通过消息框显示它 学
  • 货运公司如何决定是否重建部门?

    我正在考虑跳过货物中的依赖关系构建步骤 我有一个简单的项目 使用 3 个板条箱作为依赖项 在Cargo toml 我使用一次构建项目cargo build release 现在我有另一个项目 它使用其中提到的相同依赖项Cargo toml文
  • 重置流的状态

    我有一个问题与 stackoverflow 上的这个问题有点相似std cin clear 无法将输入流恢复到良好状态 https stackoverflow com questions 4960399 stdcin clear fails
  • 用逗号连接字符串并在每个元素周围加上引号

    我有以下字符串 s tring abcd efgh igkl mnop qrst uvwx yz 我想创建一个列表并用逗号分隔它并在每个元素周围加上引号 如下所示 some list abcd efgh igkl mnop qrst uvw
  • Amplify 的completeNewPassword 方法针对用户数据抛出 TypeError

    我尝试将自定义 UI 与 aws Amplify 结合使用 但遇到了 Auth completeNewPassword 问题 任何使用此方法的尝试都会引发错误Error in v on handler TypeError Cannot re
  • 即使我没有右键单击该节点,树视图节点也会突出显示

    我正在开发一个winform 在我的UI上有一个树视图 我发现即使我没有用鼠标右键单击该节点 树节点也会突出显示 例如 当我单击以下位置时 Node1将突出显示 但我真的不喜欢这种行为 因为我想在没有单击树节点时显示不同的上下文菜单 根节点
  • 如何将 CORS(跨源策略)添加到 NGINX 中的所有域?

    我创建了一个文件夹 用于提供静态文件 CSS 图像 字体和 JS 等 我最终会将文件夹 CNAME 到子域中 以便在 CDN 上使用 以便与我的 Magento 2 设置一起使用 我想允许所有域通过 CORS 跨源策略进行所有访问 并且我也
  • 从 C* 表中获取不同的分区键

    cqlsh 不允许嵌套查询 因此我无法将所选数据导出到 csv 我正在尝试使用以下命令从 cassandra 导出选定的数据 大约 200 000 行 单列 echo SELECT distinct imei FROM listener s
  • 如何在nodejs sdk v12中生成带有SAS签名的azure blob url?

    以前 在旧版 sdk 中 如 v2 您可以生成一个 sas url blob 的签名可共享 url 如下所示 var azure require azure storage var blobService azure createBlobS
  • 将架构名称与 SQL Server 和 ServiceStack.OrmLite 一起使用

    有人知道如何将正确的 Alias 属性应用于具有架构名称的查询表吗 我有一张桌子叫accounts register 我尝试过使用 Alias accounts register 作为 Register 类的类装饰器属性 但这不起作用 如果
  • 在 TWS API 中请求 nextOrderID 不起作用

    我正在尝试使用 python 通过 TWS API 下订单 我的问题是获取下一个有效的订单 ID 这是我正在使用的 from ibapi client import EClient from ibapi wrapper import EWr
  • 使用MongoDB时需要JPA吗?

    我对这两者很困惑 我正在看戏 java框架 它说它使用JPA 我正在考虑使用 Play 第一次在项目中使用 MongoDB 我以前使用过JPA 但当时我用它来写入关系数据库 mysql MongoDB 不是关系数据库 所以如果我想将它与 P
  • SPMD 与 Parfor

    我对 matlab 中的并行计算很陌生 我有一个创建分类器 SVM 的函数 我想用几个数据集来测试它 我有一个 2 核工作站 所以我想并行运行测试 有人可以向我解释一下以下之间的区别 dataset array dataset1 datas
  • 在 Visual Studio 数据库项目/SQL Server 中创建默认数据

    有没有办法在VS 2010的数据库项目中使用数据生成计划来创建一组默认数据 或者我是否找错了树 即数据生成计划是否最适合创建虚拟示例数据 我们有大量需要为每个数据库部署创建的数据 默认设置 默认用户等 如果有工具来帮助我们解决这个问题就好了
  • 在列表中查找最新版本

    我可以在文件夹中搜索所有版本日志行 但我试图选择列表中的最新版本 但我不知道如何选择 因为列表的元素包含字符和数字 下面是我的代码 用于查找和创建一个名为matched lines的列表 其中包含所有说明日志版本号的行 我希望从创建的列表中
  • 带有附加事件的 EventToCommand

    我在附加事件上使用Validation Error的文本框 验证错误 http msdn microsoft com en us library system windows controls validation error 28v vs
  • 条件绑定

    我是 JavaFx 新手 我正在创建一个应用程序 用户必须填写一些表单 并且我想使用绑定 预先验证 它们 简单的事情 比如所有元素都不能为空 或者其中一些元素只能包含数字 这是我到目前为止所拥有的 saveBtn disableProper
  • dotenv-webpack 在 webpack.config.js 中使用环境变量

    My env设置如下 SECRET KEY mysecretkey123 My webpack config js设置如下 const Dotenv require dotenv webpack module exports proxy a