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

关键词：

【中文标题】使用 nuxt.js 和 vue.js 在 <template> 标记内加载脚本【英文标题】：Load script inside the <template> tag using nuxt.js and vue.js 【发布时间】：2018-05-07 17:29:21 【问题描述】：

我正在使用 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="sampleSource" 的脚本不会加载也不会执行，感谢您的帮助。非常感谢。

【问题讨论】：

【参考方案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>

【讨论】：

【参考方案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>

【讨论】：

Vue.js 和 Nuxt.js

】Vue.js和Nuxt.js【英文标题】：Vue.jsandNuxt.js【发布时间】：2018-06-1008:46:16【问题描述】：您好，首先感谢那些回答这个问题的人。这个问题可能愚蠢问。我正在将我的水疗中心从vue.js切换到vue.js提供的nuxt，但现在写到我很麻烦，... 查看详情

nuxt.js中使用markdown编辑器(代码片段)

...,plugins:[src:"~plugins/vue-markdown.js",ssr:false,],4.在页面中使用举例<template><div><no-ssr><mavon-editor:toolbars="markdownOption"v-model="handbook"/></no-ssr></div></template><script>exportdefaultdata()return... 查看详情

使用 Jest 测试 NUXT.js 和 Vue.js 应用程序。获取“在 mapState() 中找不到 [vuex] 模块命名空间”和“[vuex] 未知操作类型”

】使用Jest测试NUXT.js和Vue.js应用程序。获取“在mapState()中找不到[vuex]模块命名空间”和“[vuex]未知操作类型”【英文标题】：TestingaNUXT.jsandVue.jsappwithJest.Getting\'[vuex]modulenamespacenotfoundinmapState()\'and\'[vuex]unknownactiontype\'【发布时间... 查看详情

Vue.js (Nuxt) 返回 JSON 数据

...ONData【发布时间】：2021-10-1709:40:34【问题描述】：我尝试使用Nuxt.js制作JSONAPI。但是我请求了一个URL并且返回了html代码（网站的源代码。如：view-source:https://website.com）。我怎样才能让JSON改为返回？API代码如下：<template><di... 查看详情

使用 nuxt-mail 在 Nuxt.js 中发送邮件

】使用nuxt-mail在Nuxt.js中发送邮件【英文标题】：SendingmailinNuxt.jswithnuxt-mail【发布时间】：2021-07-1011:05:47【问题描述】：我是Nuxt.js/Vue.js的新手，所以这里有一些新手问题：D我在从Nuxt.js应用程序中的联系人发送邮件时遇到问题。... 查看详情

如何在 nuxt.js (vue.js) 中配置动态 og 标签？

....js(vue.js)?【发布时间】：2018-05-3112:59:18【问题描述】：我使用vueinitnuxt/expressmyprojectstart启动了nuxt应用程序。这是我的目录。page|-_project.vue|-project|-index.vue_project.vue的 查看详情

Vue.js 和 Nuxt.js 中的 Firebase 存储 CORS 错误

】Vue.js和Nuxt.js中的Firebase存储CORS错误【英文标题】：FirebaseStorageCORSerrorinVue.jsandNuxt.js【发布时间】：2021-12-3020:32:31【问题描述】：我正在尝试从我的Web应用程序(Vue.js+Nuxt.js)下载存储在firebase-storage上的.pdf但是出现了这个错误访... 查看详情

如何测试 nuxt.js asyncData 并获取钩子

...时间】：2020-12-1715:34:59【问题描述】：我一直在尝试测试使用nuxt（asyncData和fetch挂钩）的文件，我在测试vue.js正常生命周期时没有问题，但我注意到vue/test-utils没有给出关于如何使用的明确说明测试nuxt的钩子。登录.vueasyncDat 查看详情

如何在 Vue.js/Nuxt.js 中为 RepositoryFactory 编写测试

】如何在Vue.js/Nuxt.js中为RepositoryFactory编写测试【英文标题】：HowtowritetestforRepositoryFactoryinVue.js/Nuxt.js【发布时间】：2022-01-2106:03:34【问题描述】：夏天我已经为Vue.js/Nuxt.js应用程序中的API连接实现了RepositoryFactory模式。https://medium... 查看详情

我想为 vue.js (nuxt.js) 中的每个组件加载和填充数据

】我想为vue.js(nuxt.js)中的每个组件加载和填充数据【英文标题】：Iwanttoloadandpopulatethedataforeachcomponentinvue.js(nuxt.js)【发布时间】：2017-11-2807:56:44【问题描述】：我按如下方式启动项目。vueinitnuxt/express我的目录是...components|-slider.vu... 查看详情

如何在 nuxt.js 中挑选 bootstrap-vue.js 模块？

】如何在nuxt.js中挑选bootstrap-vue.js模块？【英文标题】：Howtocherry-pickbootstrap-vue.jsmodulesinnuxt.js?【发布时间】：2019-04-0512:03:04【问题描述】：我无法理解如何在nuxt.js中挑选bootstrap-vue.js模块nuxt.config.js中的以下代码正在拉取整个库... 查看详情

基于vue.js的ssr技术—nuxt.js

为什么要使用Nuxt.jsNuxt基于一个强大的模块化架构。你可以从50多个模块中进行选择，让你的开发变得更快、更简单。对PWA的支持、添加谷歌分析到你的网页或生成网站地图，这些功能都无需重新发明轮子来获得。Nuxt.js默认会优... 查看详情

使用 Vue.js 创建可重用的按钮组件

】使用Vue.js创建可重用的按钮组件【英文标题】：CreateReusableButtonComponentwithVue.js【发布时间】：2019-03-2420:33:45【问题描述】：我有一个Nuxt.js项目，我正在使用自定义按钮。按钮是一个链接，带有一个svgpath和一个span。我还有按钮... 查看详情

如何在 nuxt.js 中编写全局路由器功能

...2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute=newRouter(routes:[...])route.beforeEach(to,from,next)// 查看详情

如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误

】如何在Nuxt.js中使用CKEditor-未定义窗口错误【英文标题】：HowtouseCKEditorwithNuxt.js-windowisnotdefinederror【发布时间】：2020-08-1503:00:36【问题描述】：在Vue.js中，这是我使用的设置。在Nuxt.js中，我收到“未定义窗口”错误。根据我的... 查看详情

Vue-Router 和 i18n 与 Nuxt

】Vue-Router和i18n与Nuxt【英文标题】：Vue-Routerandi18nwithNuxt【发布时间】：2021-03-0220:48:42【问题描述】：我正在将一个带有vue-router的项目从Vue.js转移到Nuxt.js。经过数小时的尝试和谷歌搜索，我设法让一切正常工作，但有一个我无法... 查看详情

Nuxt js (vue js) 禁用默认头链接

...】：我正在创建一个系统，我正在为我的应用程序的前端使用vue-nuxt框架。到目前为止，这是一个很棒的js框架，但我遇到了一个问题，也许有人可以帮助我这是我的nuxt.config.js文件exportdefaulthead:titleTemplat 查看详情

vue-awesome-swiper使用教程

...（开箱即用）官方地址：https://zh.nuxtjs.org/guideⅡ.Nuxt安装使用Ⅲ.Nuxt模板目录结构分析重点关注：components、layouts、pages、plugins、nust.config.js目录及文件Ⅳ.Nuxt路由➀.pages目录结构自动生成对应的路由配置➁路由跳转注意：... 查看详情