如何将第 3 方脚本代码添加到 Nuxt？
Posted
技术标签:
【中文标题】如何将第 3 方脚本代码添加到 Nuxt？【英文标题】：How to add a 3rd party script code into 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
,
【问题讨论】：
【参考方案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！以上是关于如何将第 3 方脚本代码添加到 Nuxt？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Maven 将第 3 方 OSGi 捆绑包添加到部署包中？