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

【问题标题】：Nuxt: How to execute external script after rerender only?Nuxt：仅在重新渲染后如何执行外部脚本？
【发布时间】：2019-06-11 11:12:13
【问题描述】：

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

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

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

大概这个问题在使用这样的框架时很常见。

没有错误消息——在重新渲染之前只有一个 dom 元素的闪烁。这是我当前设置的预期行为，但我正在（绝望）寻找解决方法。

【问题讨论】：

它是什么脚本？如果它改变了影响 vue 的 dom，唯一的办法就是将它包装到 vue 中

标签： vue.js nuxt.js

【解决方案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，它只会在页面加载完成后执行。

【讨论】：

【解决方案2】：

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

script defer attribute

defer in vue-meta

【讨论】：