Question

我想在nuxtjs app中将以下脚本嵌入到我的组件中。但是因为nuxt没有解决方案。我想请求vue社区查看是否有更好的方法来嵌入外部第三方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>

谢谢！

Answer 1

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

// 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>

虽然要求部分可能搞砸了......

让我知道这是否有效！

Answer 2

在<head>内插入MailChimp代码

head() {
    return {
      script: [
        {
          type: 'text/javascript',
          src:
            '//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js',
          'data-dojo-config': 'usePlainJson: true, isDebug: false'
        },
        {
          type: 'text/javascript',
          innerHTML: `window.dojoRequire(['mojo/signup-forms/Loader'], function(L) {
                          L.start({
                            baseUrl: 'mc.us17.list-manage.com',
                            uuid: 'your_uuid',
                            lid: 'your_lid',
                            uniqueMethods: true
                          })
                        })`
        }
      ],
      __dangerouslyDisableSanitizers: ['script']
    }
  }

如何将mailchimp与nuxt js app集成？

2 个答案: