如何在 Nuxt 中将“text/javascript”添加到 <head>答案

【问题标题】：How to add "text/javascript" to <head> in Nuxt如何在 Nuxt 中将“text/javascript”添加到 <head>
【发布时间】：2021-01-14 04:29:01
【问题描述】：

我必须在<head> 标记中添加以下脚本。但在 Nuxt 中，我必须将其作为 objext 添加到 nuxt.config.js 中。

我该怎么做？

<script type="text/javascript">
  /* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */
  /*
  window.grsfConfig = {
    email: "participant@email.com",// Replace this with the participant's email address
    hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value
  };
  */
  (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);
</script>

【问题讨论】：

标签： nuxt.js

【解决方案1】：

两种方法

首先：在 nuxt-page-component 中使用 nuxt head()（推荐）

export default{
    head(){
        return {
            script: [
                {
                    type:'text/javascript',
                    innerHTML: `/* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */
  /*
  window.grsfConfig = {
    email: "participant@email.com",// Replace this with the participant's email address
    hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value
  };
  */
  (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);`
                }
            ]
        }
    }
}

在nuxt.config.js:

module.exports = {
    head: {
        script: [
            {
                type:'text/javascript',
                innerHTML: `/* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */
  /*
  window.grsfConfig = {
    email: "participant@email.com",// Replace this with the participant's email address
    hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value
  };
  */
  (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);`
            }
        ]
    }
};

这就是你得到的

秒：自定义index.html

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
<script type="text/javascript">
  /* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */
  /*
  window.grsfConfig = {
    email: "participant@email.com",// Replace this with the participant's email address
    hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value
  };
  */
  (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);
</script>
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

【讨论】：

【解决方案2】：

在 Nuxt 中正确的方法是为 GrowSurf 创建自己的插件（请参阅 nuxt plugin docs）。

首先，在一个新文件plugins/growsurf.js中创建你的插件：

/* eslint-disable */

export default ({ app }) => {
  /*
   ** Only run on client-side and only in production mode
   */
  if (process.env.NODE_ENV !== 'production') {
    return;
  }

  /* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */
  /*
  window.grsfConfig = {
    email: "participant@email.com",// Replace this with the participant's email address
    hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value
  };
  */
  (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);

}

然后告诉 Nuxt 将其导入您的主应用程序：

// nuxt.config.js

export default {
  plugins: [{ src: '~plugins/growsurf.js', mode: 'client' }]
}

此外，您可以在官方 Nuxt 常见问题解答中找到类似的 Google Analytics 示例：https://nuxtjs.org/faq/ga

【讨论】：