【问题标题】：How to add a 3rd party script code into Nuxt?如何将第 3 方脚本代码添加到 Nuxt？
【发布时间】：2021-08-04 15:02:38
【问题描述】：

我正在尝试将 Segment Analytics 提供的 sn-p 添加到 nuxt.config.js，但出现以下错误：

FATAL $config 未定义

我做错了什么？

nuxt.config.js:

head: {
  script: [
    {
      hid: 'segment-script',
      innerHTML: `
        !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)...
        analytics.load(${this.$config.segmentApiSecret});
        analytics.page();
        }}();
      `,
      type: 'text/javascript',
      charset: 'utf-8'
    }
  ]
},
privateRuntimeConfig: {
  segmentApiSecret: process.env.SEGMENT_API_SECRET
},

【问题讨论】：

标签： nuxt.js

【解决方案1】：

如何加载外部 JavaScript 脚本

如果您打算导入.js 文件，我推荐这篇文章：https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/
使用 inject 将 NPM 包添加到 Nuxt 的上下文中，Alexander 的 blog post 进一步解释了它
Josh Deltener 也有一个great article，关于如何正确导入它（使用各种方法！）
您也可以在您的nuxt.config.js 文件中使用this solution（它并不像您在github issues of Nuxt 中看到的那么糟糕）

head: {
  __dangerouslyDisableSanitizers: ['script'],
  script: [
    {
      hid: 'gtm-script1',
      src: 'https://www.googletagmanager.com/gtag/js?id=UA-111111111-1',
      defer: true
    },
    {
      hid: 'gtm-script2',
      innerHTML: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-111111111-1');
      `,
      type: 'text/javascript',
      charset: 'utf-8'
    }
  ]
},

否则，您也可以将其添加到项目根目录下的app.html

<html {{ HTML_ATTRS }}>
   <head>
    {{ HEAD }} 
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}

    <!--EXTRA JS FILES-->
  </body>
</html>

回答最初的答案

如果要在nuxt.config.js文件中添加，需要直接使用process.env.SEGMENT_API_SECRET。

将它添加到一些中间件或默认布局中可能是一个好主意，而不是将一些 HTML 直接放入配置文件中。

此外，如果您要在客户端中公开它，则将其添加到 privateRuntimeConfig 是没有意义的。 privateRuntimeConfig 仅 used for server operations 在构建应用程序时（在 Node.js 端）。在您的情况下，Segment 将是完全公开的，因此，您应该可以公开您的公共 API 密钥（仍然要仔细检查）。

编辑：其他您也可以为此目的使用官方的Nuxt 或Vue 插件。

【讨论】：

谢谢！那部分没有更多错误，但现在我的 sn-p 触发了其他问题。我认为我的方法不像你说的那样正确。最初，我的 sn-p 在位于 static/ folder and that snippet was calling process.env.SEGMENT_API_SECRET` 的 segment.js 中，但我遇到了这个错误：“未定义进程”，并且 $config 在那里也无法访问。知道使用 Nuxt.js 执行此操作的正确方法是什么吗？
感谢@kissu 我已经看到了这些，但我不喜欢为此使用插件，因为本机/标准/常规方式非常简单。另外我想知道如何实现这一点，因为它可能对我需要在我的 Nuxt.js 应用程序中包含一个带有秘密 API 密钥的 sn-p 的其他 API 有用。
谢谢@kissu，问题是这些解决方案都没有处理检索存储在.env 文件中的API 密钥...！
在我最初的回答中已经解释过了，要么直接使用process.env，要么使用公共运行时并通过上下文（$config）访问它。
是的，但我意识到我无法将 sn-p 粘贴到 nuxt.config.js 中，就像我的问题一样，这似乎会产生很多问题。相反，我需要一个包含 sn-p 的文件，就像您链接的文章中的 vueschool.io/articles/vuejs-tutorials/… 一样。但是在那个文件中，我无法访问process.env 或$config！