Question

我正在使用nuxt.js（基于vue.js）来构建自定义网站，我需要使用我的合作伙伴提供的广告在我的网站上加载，我需要将它放在特定的地方在我的HTML代码上。所以我将它添加到我的组件模板，但它不呈现。以下是我试图开始工作的代码示例

<template>
  <div>
    <div class="columns is-centered is-mobile">
      <p>Hello World</p>
    </div>
    <div>
      <script type="text/javascript" src="sampleSource"></script>
    </div>
  </div>
</template>
<script>
  export default {
  }
</script>

来自src =＆＃34; sampleSource＆＃34;的脚本没有加载，也没有执行，任何帮助表示赞赏。非常感谢你。

Answer 1

在页面上，使用body: true的元数据在body

中添加脚本

<script>
export default {
  head: {
    script: [
      { src: '/head.js' },
      // Supported since Nuxt 1.0
      { src: '/body.js', body: true },
      { src: '/defer.js', defer: '' }
    ]
  }
}
</script>

Answer 2

您需要创建一个（sample-source.vue）组件并将其带到/ components目录。之后，您需要为组件创建一个插件：/plugins/sample-source.js

sample-source.js：

import Vue from 'vue'
import SampleSource from '~/components/sample-source.vue'

Vue.use(SampleSource)

nuxt.config.js：

...
module.export
...
plugins: [
  '~/plugins/sample-source.js'
]

完成这些步骤后，您可以随处使用您的组件。

或最简单的方法：

<template>
  <div>
    <div class="columns is-centered is-mobile">
      <p>Hello World</p>
    </div>
  </div>
</template>
<script>
  export default {
    mounted () {
----your code here from sampleSource.js----
    }
  }
</script>

使用nuxt.js和vue.js在<template>标记内加载脚本

2 个答案: