强制 Nuxt 到运行脚本标签

Question

我在页面上有一个脚本：

<script type="text/javascript">app_id="ID_HERE";distribution_key="dist_6";</script><script type="text/javascript" src="https://loader.knack.com/ID_HERE/dist_6/knack.js"></script><div id="knack-dist_6">Loading...</div>

如果我通过导航中的 NuxtLink 转到该页面，脚本会运行，但是如果我在浏览器地址栏中键入 URL，它不会运行。

有没有办法在直接访问页面时强制NuxtLink结果？

脚本标签来自 CMS，因此无法在合适的地方对其进行硬编码。

谢谢！

Answer 1

有一个 head 方法 (Docs) 可以让您加载外部脚本，但是我找不到 script 属性.

的文档

我会像这样只在客户端动态加载脚本：

<template>
  <div id="knack-dist_6">Loading...</div>
</template>

<script>
export default {
  // ...
  async created() {
    // Do not load the script on the server side
    if (!process.client) return
   
    // Function to load the external script
    function loadLib(id, distKey) {
      const scriptId = 'knack-js'

      return new Promise((resolve, reject) => {
        // If script already exists than do not load it again
        if (document.getElementById(scriptId)) {
          resolve()
          return
        }

        const s = document.createElement('script')

        s.src = `https://loader.knack.com/${id}/${distKey}/knack.js`
        s.id = scriptId
        s.type = 'text/javascript'

        s.onload = () => {
          resolve()
        }

        s.onerror = (e) => {
          reject(e)
        }

        document.head.appendChild(s)
      })
    }

    try {
     if (!window.app_id) {
        window.app_id = 'ID_HERE'
        window.distribution_key = 'dist_6'
     }

      await loadLib('ID_HERE', 'dist_6')
    } catch (e) {
      // Handle script loading error
      console.error(e)
    }
  }
}
</script>

强制 Nuxt 到运行脚本标签

Force Nuxt to run script tag

vue.js

nuxt.js

script

强制 Nuxt 到 运行 脚本标签

Force Nuxt to run script tag

vue.js

nuxt.js

script

强制 Nuxt 到运行脚本标签