04. 配置title、description、keywords、网站图标、公共样式表等

全局配置

全局配置在nuxt.config.js中的head字段中配置，如下 ：

head: {
    title: '这是标题', // title
    htmlAttrs: {
      lang: 'en', // html标签的自定义属性
    },
    headAttrs: {
      name: 'headname', // head标签的自定义属性
    },
    bodyAttrs: {
      style: 'background-color: green', // body标签的style样式
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '这是描述' }, // description
      { hid: 'keywords', name: 'keywords', content: '这是keywords' }, // keywords
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '//www.hqpcb.com/favicon.ico' }, // 网站图标
      { rel: 'stylesheet',  href: '//www.hqpcb.com/static/ui/common.css?ver=350071' }, // 样式表，不一定要是线上的，也可以是本地的
    ],
    script: [
      { src : 'http://libs.baidu.com/jquery/2.0.0/jquery.min.js' }, // 脚本，不一定要是线上的，也可以是本地的
    ]
  },

配置当前页面

配置当前页面的title、description、keywords等信息在head钩子函数中配置

<template>
  <div>
      <h1>自定义当前页面的head</h1>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                title: '这是自定义标题，可以通过接口赋值',
                description： '',
                keywords: '',
            }
        },
        head() {
            return {
                title: this.title,
                meta: [
                    { hid: 'description', name: 'description', content: this.description },
                    { hid: 'keywords', name: 'keywords', content: this.keywords },
                ],
            }
        }
    }
</script>