Nuxt - 将脚本添加到 head 和 body

Question

我正在尝试在我的 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>

我试过这种方法，但是 returns 有一个错误 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 却不能。

谢谢

Answer 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)
      }
    ]
  }
}

Answer 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/

Nuxt - 将脚本添加到 head 和 body

Nuxt - add script to head and body

nuxt.js