如何将第三方脚本代码添加到Nuxt中？ [英] How to add a 3rd party script code into Nuxt?
本文介绍了如何将第三方脚本代码添加到Nuxt中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将Segment Analytics提供的代码段添加到nuxt.config.js中，但收到以下错误：
未定义致命的$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
},
推荐答案
如何加载外部JavaScript脚本
如果您计划导入
.js文件，我建议您阅读本文：https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/Josh Deltener也有great article关于如何正确导入它的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中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
