Nuxt.js引用谷歌广告代码

时间: 2019-09-24阅读: 422标签: nuxt

最近另一个网站的谷歌联盟申请下来了,记录一下Nuxt.js如何引用谷歌广告的JS代码,当初找了好久。

只配置nuxt.config.js文件就可以,下面贴出来。

// 这段是谷歌广告要引入的JS代码,这里装在一个字符串变量里xxxxx就是你的ID
const absbygoogle = '(adsbygoogle=window.adsbygoogle||[]).push({google_ad_client:"ca-pub-xxxxx",enable_page_level_ads:true});';

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    meta: [
      {charset: 'UTF-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1, shrink-to-fit=no'},
      {httpEquiv: 'Content-Type', content: 'text/html; charset=UTF-8'},
      {httpEquiv: 'content-language', content: 'zh-CN'}
    ],
    script: [
      // 这里引入谷歌广告的JS文件,async要为true
      {src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', async: 'true'},
      // 把上面的JS代码变量引用到这里
      {innerHTML: absbygoogle, type: 'text/javascript', charset: 'utf-8'}
    ],
    // 禁止对JS转义,这一句一定要加上
    __dangerouslyDisableSanitizers: ['script']
  },

  /*
  ** Customize the progress-bar color
  */
  loading: '@/components/loading.vue',

  /*
  ** Global CSS
  */
  css: [
    '@/assets/common.css',
    '@/assets/icon/iconfont.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/axios'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios'
  ],

  /*
  ** Build configuration
  */
  build: {
    extractCSS: {allChunks: true},
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}

其实加三段代码就可以了,我都用中文注释标出来了,就这样。

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/5514

使用Nuxt生成静态网站

静态网站如今再次流行起来了。信息站和品牌宣传站不再需要使用WordPress之类的内容管理系统来动态更新。使用静态网站生成器,您可以从无源CMS,API

精读《Nuxtjs》

Nuxt 是基于 Vue 的前端开发框架,这次我们通过 Introduction toNuxtJS 视频了解框架特色以及前端开发框架的基本要素。nuxt 与 next 结构很像,可以结合在一起看

Webstorm环境使用nuxt.js做开发,@ 和 ~ 别名配置

webstorm 设置@和~别名,有助于代码查看和跳转.在项目下创建一个webpack.config.js,内容如下;设置 IDE:webstorm -> file -> settings -> language & frameworks -> javascript -> webpack

nuxt.js的使用和开发,一款vue基于服务器SSR渲染工具

一款基于Vue.js的SSR框架——Nuxt.js。是vue进行SSR的一个优选开源项目,可免去繁琐的Webpack、nodejs后台服务配置等操作,方便的搭建一个支持SSR的vue项目。

nuxt框架中对vuex进行模块化设置

Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装。Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:Nuxt.js 支持两种使用 store 的方式:普通方式: store/index.js 返回一个 Vuex.Store 实例

服务端预渲染之Nuxt

现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular、React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据

Travis CI 部署遇到的问题? 部署怎么启动 nuxt服务

uxt打包的静态文件可以直接放在GitHub上面,然后 TravisCI跟GitHub又很亲切,就选择了TravisCI部署。Travis CI 部署到GitHub项目gh-pages分支上,打开页面发现引用资源404?

Nuxt.js部署应用的方式

Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。静态应用部署就不说了,主要说说服务端渲染应用部署。每次在服务器上执行nuxt build,总是有如下报错,并且jenkins会随之挂掉。

使用nuxt.js官方脚手架构建koa2的es6编译问题

最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢?这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的,所以我们首先需要在启动命令后加上 --exec babel-node

使用Nuxt.js创建服务器端渲染的Vue.js应用程序

Nuxt.js基于名为Next的热门React库的SSR实现。 为Vue设计了一个名为Nuxt的类似实现。 熟悉React + Next组合的人会在应用程序的设计和布局中发现一些相似之处。 但是,Nuxt提供Vue特有的功能来为Vue创建强大且灵活的SSR解决方案。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全