我正在尝试将 Segment Analytics 提供的代码片段添加到 nuxt.config.js 中，但出现以下错误:
FATAL $config is not defined
我做错了什么？
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
},
最佳答案
如果您打算导入 .js 文件，我推荐这篇文章:https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/
使用 inject将 NPM 包添加到 Nuxt 的上下文中，这 blog post Alexander 进一步解释了这一点
Josh Deltener 有一个 great article关于如何正确导入它(使用各种方法!)
您也可以使用 this solution在你的 nuxt.config.js 文件中(它并不像你在 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 将完全公开，因此，您应该可以公开您的公共(public) API key (仍然仔细检查)。
编辑:其他你也可以使用官方的Nuxt或 Vue用于此目的的插件。
https://stackoverflow.com/questions/67534304/