使用Nuxt/Vue.js与Paddle

Question

有人在Nuxt中使用过Paddle吗？ 我正在尝试在Nuxt应用程序页面（组件）中运行它：

<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script type="text/javascript">
    Paddle.Setup({ vendor: 1234567 });
</script>

我已经尝试了三种方法，但都没有成功。

1. NPM和paddle-sdk

https://www.npmjs.com/package/paddle-sdk

依赖项过时，无法在现代项目上构建。 当安装npm i --save paddle-sdk时，会出现以下错误。 这些依赖关系中有一些无法通过npm获得：

 WARN  in ./node_modules/paddle-sdk/node_modules/keyv/src/index.js                                                                   friendly-errors 09:02:21

Critical dependency: the request of a dependency is an expression                                                                    friendly-errors 09:02:21
                                                                                                                                     friendly-errors 09:02:21

 ERROR  Failed to compile with 4 errors                                                                                              friendly-errors 09:02:21

These dependencies were not found:                                                                                                   friendly-errors 09:02:21
                                                                                                                                     friendly-errors 09:02:21
* dns in ./node_modules/cacheable-lookup/index.js                                                                                    friendly-errors 09:02:21
* fs in ./node_modules/paddle-sdk/node_modules/got/dist/source/request-as-event-emitter.js, ./node_modules/paddle-sdk/node_modules/got/dist/source/utils/get-body-size.js
* net in ./node_modules/paddle-sdk/node_modules/got/dist/source/utils/timed-out.js                                                   friendly-errors 09:02:21
                                                                                                                                     friendly-errors 09:02:21
To install them, you can run: npm install --save dns fs net                                                                          friendly-errors 09:02:21

2. Nuxt插件

https://nuxtjs.org/docs/2.x/directory-structure/plugins/

无法创建一个具有远程（第三方）脚本的nuxt插件，只能在plugins目录中本地创建。Paddle网站上提醒您：“请勿自行托管Paddle.js，这将阻止您获取错误修复和新功能。”

3. Head方法

我可以在页面的head方法中实现该脚本，但我无法在nuxt页面中执行该脚本中的方法。换句话说，以下代码可以工作：

<script src="https://cdn.paddle.com/paddle/paddle.js"></script>

但以下代码不起作用：

<script type="text/javascript">
    Paddle.Setup({ vendor: 1234567 });
</script>

这是我 .vue 文件头部的部分：

 head: {
    script: [
      {
        hid: 'Paddle',
        src: 'https://cdn.paddle.com/paddle/paddle.js',
        async: true,
        defer: false
      }
    ]
  },

有人有运气或替代方案吗？

- georgespatton2

---

过时的依赖项是什么？使用方法1会收到哪些错误信息？ - Jesse Reza Khorasanee

你是否使用 head() 导入了脚本？在第一种方法中，能否请您分享插件代码？ - Iman Shafiei

@ImanShafiei 我在这里添加了代码。 - georgespatton2

@JesseRezaKhorasanee 我也添加了依赖错误。 - georgespatton2

Answer 1

我模拟了你的问题，将脚本导入到nuxt.config.js中：

head: {
    script: [{
        src: 'https://cdn.paddle.com/paddle/paddle.js',
    }]
}

然后在我的页面中使用它：

mounted() {
    Paddle.Setup({ vendor: 1234567 });
}

当然，它将输出您必须指定有效的Paddle供应商ID。

- Iman Shafiei

---

这只在第二次访问网站时加载，我能否强制在初始页面加载时进行加载？ - georgespatton2

你的意思是说当你刷新页面时，Paddle变量未定义？我测试过了，它是可以工作的。另外，也许你想使用defer: true或async: true。请参考https://www.w3schools.com/tags/att_script_defer.asp获取更多信息。 - Iman Shafiei

不，只有在刷新页面后才能使Paddle CSS和按钮起作用。 - georgespatton2

好的，我现在明白了。这是因为我们把初始化器放在了 mounted() 中。你想什么时候进行 Paddle 初始化呢？我认为你可以将初始化器放在一个方法中，并在需要时调用它。如果你有更多的信息，我会能够更好地帮助你。 - Iman Shafiei

我把它移到了beforeCreated，看看是否有帮助。谢谢你的帮助。 - georgespatton2