Question

Nuxt / Vue：在DOM重新呈现之后和之后，如何调用外部脚本（由第三方托管）？在每条路线上。

我正在使用向dom添加元素的脚本，但是虚拟dom不匹配。因此，一旦脚本添加了元素，虚拟dom就会将其全部删除。

添加一个defer标签没有任何作用，它只是在初始渲染后加载脚本，然后重新渲染也会发生同样的事情。

大概这样的问题在这样的框架中很常见。

无错误消息-仅在重新渲染前闪烁dom元素。这是我当前设置的预期行为，但是我正在（迫切）寻找解决方法。

Answer 1

首先，您将制作一个插件：

export default ({ app: { head, router, context } }, inject) => {
  head.scripts.push({
    src: 'http(s)://example.com/script.js'
    async: false,
    defer: true
  })
})

然后，将插件添加到nuxt.config.js部分的plugins: []中：

plugins: [
  // ....
  { src: '~/plugins/script-injecter.js', ssr: false }
]

现在它将仅在页面加载时提供，并且使用async: false和defer: true，仅在页面加载完成后才执行。

Answer 2

在defer:true中引用脚本时可以使用nuxt.config.js。

script defer attribute

defer in vue-meta

Nuxt：仅在重新渲染后如何执行外部脚本？

2 个答案: