我有一个我正在测试的应用程序,它有一个小部件,它需要一个脚本中的API密钥,而这个脚本必须放在我的标记中,所以我的.js文件在我的公共文件夹中,并被导入到我的layout.tsx中:

 <html lang="en">       
    <Script src="crm.js"/>
    <body>

我已经创建了一个.env.local文件,并按如下方式放置我的变量:

NEXT_PUBLIC_META_CRM_API_KEY=xxxxxxxxxxx

我的.js文件中的变量如下所示:

 MetaCRMWidget.init({
    apiKey: process.env.NEXT_PUBLIC_META_CRM_API_KEY
  });

我的小工具在未经授权的情况下无法加载,但当我在脚本中直接输入apiKey时,它可以工作.

我正试图在当地测试这一点.

Images of errors when adding process.env.NEXT_PUBLIC_META_CRM_API_KEYenter image description here:

推荐答案

根据Next.js文档找到的here,不可能直接从.js文件中读取Process.env.在构建时,下一步将进程.env.NEXT_PUBLIC_META_CRM_API_KEY转换为实际值.当您从脚本标记加载此脚本时,我认为下一步不会转换值,这也可以从控制台中的错误process is not defined中看到.因为您公开了这个值,所以它不是秘密,所以try 直接在小部件初始化代码中输入您的API密钥.

就像这样:

MetaCRMWidget.init({
    apiKey: "your api key"
  });

Javascript相关问答推荐

从连接字符串创建客户端时,NodeJS连接到CosmosDB失败

提交表格后保留Web表格中的收件箱值?

在页面上滚动 timeshift 动垂直滚动条

如何在angular中从JSON值添加动态路由保护?

当运行d3示例代码时,没有显示任何内容

屏幕右侧屏障上的产卵点""

在react JS中映射数组对象的嵌套数据

为什么我的getAsFile()方法返回空?

在Matter.js中添加从点A到另一个约束的约束

查询参数未在我的Next.js应用路由接口中定义

第二次更新文本输入字段后,Reaction崩溃

邮箱密码重置链接不适用于已部署的React应用程序

为列表中的项目设置动画

Node.js API-queryAll()中的MarkLogic数据移动

有没有办法更改Chart.js 3.x.x中主要刻度的字体?

在JavaScript中将Base64转换为JSON

Django模板中未加载JavaScript函数

如何在css中裁剪成一定Angular 的圆的一部分,而不需要复杂的多边形

如何缩小函数中联合返回类型的范围

鼠标进入,每秒将图像大小减小5%