如何将 mailchimp 与 nuxt js 应用程序集成？答案

【问题标题】：How to integrate mailchimp with nuxt js app?如何将 mailchimp 与 nuxt js 应用程序集成？
【发布时间】：2018-03-30 20:12:22
【问题描述】：

我想将以下脚本嵌入到我在 nuxtjs 应用程序中的组件中。但是由于 nuxt 对此没有解决方案。想问问vue社区看看有没有更好的嵌入外部3rd方js脚本的方法？

我应该在哪里嵌入这种类型的 scipt？我需要添加什么样的外部配置才能使其正常工作？

我尝试直接添加到我的模板中，但它似乎不起作用。

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) })</script>

谢谢！

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

打开您的 nuxt.config.js 文件，然后搜索 head 对象。你可以像这样添加你的第三方脚本：

// nuxt.config.js
module.exports = {
  head: {
    title: 'My title',
    // etc.
    script: [
      { src: "//downloads.mailchimp.com/js/signup-forms/popup/embed.js" },
      // You can add multiple third-party scripts here
    ]
  },
  // Other stuff
}

文档：How to use external resources?

我还没有测试过，但我认为，由于另一部分只是 javascript，您可以添加到您不想显示的页面或布局文件中（如果您想在多个页面上显示它），像这样：

// layout/default.vue
<template>
  <!-- Your template -->
</template>

<script>
  require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) });
  export default {
    // etc...
  }
</script>

虽然 require 部分可能会搞砸……

让我知道这是否有效！

【讨论】：

【解决方案2】：

在<head> 中插入 MailChimp 代码

  head() {
    return {
      script: [
        {
          type: "text/javascript", // mailchimp universal script
          src:
            "//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js",
          "data-dojo-config": "usePlainJson: true, isDebug: false"
        },
        {
          type: "text/javascript", // mailchimp script for specific popup form
          innerHTML: this.getMailchimp
        }
      ],
      __dangerouslyDisableSanitizers: ["script"]
    };
  },

  computed: {
    getMailchimp() {
      if (process.client) {
        return JSON.stringify(
          window.dojoRequire(["mojo/signup-forms/Loader"], function(L) {
            L.start({
              baseUrl: "your base url",
              uuid: "your uuid",
              lid: "your lid",
              uniqueMethods: true
            });
          })
        );
      }
    }
  }

【讨论】：