Nuxt - 将脚本添加到头部和主体

Question

Nuxt - 将脚本添加到头部和主体

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

Run Code Online (Sandbox Code Playgroud)

我已经尝试过这种方法，但它返回一个错误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
        }
      ]
    }
  }

Run Code Online (Sandbox Code Playgroud)

我还是个新手，所以非常感谢一些帮助，也许还可以描述一下为什么可以var fvp在纯 HTML 文件中识别，但不能在 Nuxt 中识别。

谢谢

Answer 1

Jas*_*son 5

请注意，Script从 Nuxt 3.0.0-rc.14 开始，该组件已被弃用，建议的方法现在是useHead https://github.com/nuxt/framework/releases/tag/v3.0.0-rc.14

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

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

Run Code Online (Sandbox Code Playgroud)

或者

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

Run Code Online (Sandbox Code Playgroud)

请注意，通常位于文档头部的大多数内容现在都有组件。还有可useHead组合的。请参阅https://nuxt.com/docs/api/composables/use-head

Answer 2

Den*_*han 3

Nuxt 2 最简单的方法：

定制你的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>

Run Code Online (Sandbox Code Playgroud)

如果该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)
      }
    ]
  }
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，6 月前
查看次数：	31248 次
最近记录：	3 年，2 月前