Nuxt - 将脚本添加到头部和身体答案

【问题标题】：Nuxt - add script to head and bodyNuxt - 将脚本添加到头部和身体
【发布时间】：2023-01-04 22:20:34
【问题描述】：

我正在尝试在我的 Nuxt 应用程序中使用此脚本，但不知道如何使用。在基本的 HTML 文件中，它工作正常。这是代码：

<!DOCTYPE html>
<html>
  <head>
    <title>outdooractive platform - API Template</title>
    <meta charset="utf-8">

    
    <!-- load Outdooractive Javascript API -->
    <script type="text/javascript" 
            src="//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>


  </head>
  <body>

    <!-- container used by FlexView API -->
    <div class="oax-top-cont"></div>


    <!-- and some lines of javascript inside a script tag -->
    <script type="text/javascript">

      var conf = {
          frontendtype:   "tour",          // choose content type
          zoom:           11,              // set initial zoom level
          center:       [ 10.292, 47.546 ] // set initial map center
      };
      
      var fvp = oa.api.flexviewpage( conf );

    </script>
  </body>
</html>

我已经尝试过这种方法，但它返回错误 api doesn't exist

data() {
    return {
      conf: {
        frontendtype: 'tour',
        zoom: 11,
        center: [10.292, 47.546]
      }
    }
  },
  head() {
    return {
      script: [
        {
          src: '//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en'
        },
        {
          body: true,
          fvp: this.oa.api.flexviewpage(this.conf) // attempt one
          fvp: () => {this.oa.api.flexviewpage(this.conf)} // attempt two
        }
      ]
    }
  }

我还很新，所以真的很感激一些帮助，也许还有关于为什么 var fvp 在纯 HTML 文件中被识别，但 Nuxt 却不能识别的描述。

谢谢

【问题讨论】：

无论 url/页面是什么，conf/fvp 都一样吗？或者不同的页面有不同的conf/fvp？

标签： nuxt.js

【解决方案1】：

最简单的方法：

custom your index.html

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <!-- load Outdooractive Javascript API -->
    <script type="text/javascript" src="//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>

  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}

    <!-- container used by FlexView API -->
    <div class="oax-top-cont"></div>


    <!-- and some lines of javascript inside a script tag -->
    <script type="text/javascript">

      var conf = {
          frontendtype:   "tour",          // choose content type
          zoom:           11,              // set initial zoom level
          center:       [ 10.292, 47.546 ] // set initial map center
      };
      
      var fvp = oa.api.flexviewpage( conf );

    </script>
  </body>
</html>

如果 conf 值是动态的，您可以将其添加到您的 head()

data() {
  return {
    conf: {
      frontendtype: 'tour',
      zoom: 11,
      center: [10.292, 47.546]
    }
  }
},
head(){
  return {
    script: [
      {
        src: '//www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en'
      },
      {
        type:'text/javascript',
        innerHTML: JSON.stringify(this.conf)
      }
    ]
  }
}

【讨论】：

【解决方案2】：

在 Nuxt 3 中，您只需使用 Script 组件，例如：

<Script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXXX-X"></Script>

要么

<Script>
   // some JS code
</Script>

请注意，大多数通常位于文档头部的内容现在都有组件。还有 useHead 可组合项。见https://v3.nuxtjs.org/guide/features/head-management/

【讨论】：

【解决方案3】：

另一个选择是

在 nuxt.config.js 中加载 ~/static 文件夹脚本，

      head: {
        ...
        script: [
          { src: '/js/script_name.js' } // load script in your static folder
        ]
      }

并将你的脚本放入 ~/js/script_name.js

【讨论】：

【解决方案4】：

对于 Nuxt3，上面给出的解决方案并没有成功。相反，这工作得很好：

// ScriptTag.vue
<script setup lang="ts">
  defineProps({
    type: {
      type: String,
      default: 'text/javascript',
      required: false,
    },
  });
</script>

<template>
  <Component :is="'script'" :type="type">
    <slot />
  </Component>
</template>

用法：

<template>
  <ScriptTag>
    // Code here
  </ScriptTag>
</template>

【讨论】：

【解决方案5】：

这是the best answer I've found on this question。就像 larrykkk 上面说的，你可以把脚本放在静态的目录并从那里加载它们。

【讨论】：