【问题标题】:Paddle with Nuxt/Vue.js使用 Nuxt/Vue.js 划桨
【发布时间】:2021-07-17 01:41:11
【问题描述】:

有人用 Nuxt 实现了 Paddle 吗?尝试在 Nuxt 应用页面(组件)中运行它:

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

我尝试了三种方法都不成功。

  1. 带有 paddle-sdk 的 NPM

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
  1. Nuxt 插件

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

无法使用远程(第三方)脚本创建 nuxt 插件,只能在插件目录中本地创建。他们网站上的 Paddle 问道:“请不要自行托管 Paddle.js,这将阻止您接收错误修复和新功能。”

  1. 头部方法

我可以在页面内的 head 方法中实现脚本,但我无法从 nuxt 页面内的脚本中执行方法。换句话说,这是可行的:

&lt;script src="https://cdn.paddle.com/paddle/paddle.js"&gt;&lt;/script&gt;

但这不是:

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

任何人有任何运气或替代解决方案?

【问题讨论】:

  • 什么是过时的依赖项?方法 1 会出现什么错误?
  • 您是否使用head() 导入脚本?第一种方法,可以分享一下插件代码吗?
  • @ImanShafiei 我在这里添加了代码。
  • @JesseRezaKhorasanee 我也添加了依赖错误。

标签: javascript vue.js vue-component nuxt.js paddle-paddle


【解决方案1】:

我模拟你的问题,我把脚本导入nuxt.config.js:

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

并在我的页面中使用它:

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

当然,它会输出You must specify a valid Paddle Vendor ID

【讨论】:

  • 这只会在第二次访问网站时加载,我可以在初始页面加载期间强制加载吗?
  • 你的意思是当你刷新页面时,Paddle这个变量是未定义的?我测试了它,它工作正常。另外,也许您想使用defer: trueasync: true。请参阅此w3schools.com/tags/att_script_defer.asp 了解更多信息。
  • 不,只有在刷新时,Paddle CSS 和按钮才能工作。
  • 好的,我知道了。这是因为我们将发起者放在mounted() 中。你想Paddle什么时候发起?我认为您可以将启动器放入一个方法中,并在需要时调用它。如果您有更多信息,我可以为您提供更多帮助。
  • 我将它移到 beforeCreated 中,看看是否有帮助。感谢您的帮助。
猜你喜欢
  • 1970-01-01
  • 2022-12-02
  • 2021-10-17
  • 2021-08-28
  • 2022-06-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-08-26
相关资源
最近更新 更多