如何在 pug 脚本中访问 bashrc 环境变量。部分

Question

我有一个 recaptcha 站点密钥存储在 .bashrc 中，并且想在我的 pug 视图中使用环境变量。我的 JS 脚本的验证码部分位于“脚本”下。 pug 文件中的部分。

我尝试使用 #{ } 来插入 pug JS 变量，并且我已通过“路由”传入 env 变量，但无济于事。插值在验证码请求中留下一个空白空间。

// INDEX ROUTE
var express = require('express');
var router = express.Router();
const request = require('request');
var textUtil = require('../utils/sendText');

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Phoenix Flight Fire Supply', siteKey: process.env.PHOENIX_CAPTCHA_SITE_KEY }); // Passing in 'siteKey'
});


//INDEX PUG FILE
doctype html
html
  head
    title= title

    script(async, src='https://www.googletagmanager.com/gtag/js?id=UA-144999292-1')

    script.
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-144999292-1');


    meta(name='viewport' content='width=device-width, initial-scale=1')
    meta(name='theme-color' content='#B61919')
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/stylesheets/flickity.min.css' media='screen')
    link(rel='icon' sizes='192x192' href='images/phoenixfirelogosolid.png')
    script(src='javascripts/flickity.pkgd.min.js')
    script(src='javascripts/libs/inflate.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.0.3/babylon.max.js')
    script(src='https://d3js.org/d3.v3.min.js' language='JavaScript')
    script(src='javascripts/liquidFillGauge.js' language='JavaScript')
    script(src=`https://www.google.com/recaptcha/api.js?render=${siteKey}`)

    link(rel='stylesheet' href='https://use.typekit.net/gmu0vhj.css')
    link(rel='stylesheet' href='https://use.typekit.net/gmu0vhj.css')
    link(rel='stylesheet' href='https://use.typekit.net/gmu0vhj.css')
  body
    block content



... (BODY)



script.
  //RECAPTCA v3 LOAD
    grecaptcha.ready(function() {
      grecaptcha.execute(siteKey, {action: 'submitLead'}).then(function(token){
            // add token value to form
            document.getElementById('g-recaptcha-response').value = token;
        });
    });

虽然我没有收到任何错误，但由于 siteKey 未定义，recaptcha 无法正常工作。本质上，哈巴狗预处理工作不正常。

预处理无法识别“siteKey”。如果我添加 #{}，则值为 '' 并且不会显示 recaptcha。

grecaptcha.ready(function() {
  grecaptcha.execute(siteKey, {action: 'submitLead'}).then(function(token) {
        // add token value to form
        document.getElementById('g-recaptcha-response').value = token;
    });
});</script></body></html>

最后一点：我检查了 .bashrc 文件，并且环境变量拼写正确。密钥被 "" 引号包围，我正在运行一个 Ubuntu 18.04 环境，运行 Nginx 作为 Express 的代理。

感谢您的帮助！

Answer 1

在您的客户端 JavaScript 中，我认为您从未声明过您的 siteKey 变量。

你能试试这样的吗？

script(src=`https://www.google.com/recaptcha/api.js?render=#{siteKey}`)

...
script.
  const siteKey = #{siteKey}
  //RECAPTCA v3 LOAD
  grecaptcha.ready(function() {
    grecaptcha.execute(siteKey, ...

---

如果这不起作用，我会先尝试手动将密钥复制到常量中，然后查看应用程序是否有效。