如何将第 3 方脚本代码添加到 Nuxt 中？

Question

如何将第 3 方脚本代码添加到 Nuxt 中？

我正在尝试将细分分析提供的代码片段添加到其中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
},

Run Code Online (Sandbox Code Playgroud)

Answer 1

kis*_*ssu 9

如何加载外部 JavaScript 脚本

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

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'
    }
  ]
},

Run Code Online (Sandbox Code Playgroud)

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

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

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

Run Code Online (Sandbox Code Playgroud)

回答最初的答案

如果要将其添加到nuxt.config.js文件中，则需要直接使用process.env.SEGMENT_API_SECRET.

将其添加到某些中间件或默认布局中可能比直接将一些 HTML 放入配置文件中更好。

privateRuntimeConfig另外，如果您无论如何都要在客户端中公开它，则添加它是没有意义的。privateRuntimeConfig仅在构建应用程序时用于服务器操作（在 Node.js 端）。在你的情况下，Segment 将是完全公开的，因此，你应该可以公开你的公共 API 密钥（仍然要仔细检查）。

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

归档时间：	4 年，8 月前
查看次数：	12248 次
最近记录：	3 年，2 月前