Vue SSR 项目 Nuxt.js 框架之《设置mate与定义

2022-03-14  本文已影响0人  酷酷的凯先生

# 前言

在做一些SEO的时候,一般会设置meta信息,或者做移动端项目的时候会设置一下视口等。我们一起看下在nuxt中如何设置metahead内容的,以及如何定义化html模板。

# 配置文件 nuxt.config.js 中设置 head 信息

export default {
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
        // 这里的 title 可以取配置文件里的,也可以自己设置
        title: process.env.npm_package_name ||  '全局title',
        htmlAttrs: {
            lang: 'en'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            // 这里最好设置一个 hid,不然每个页面再设置 title 的时候会出现两个title标签  
            // 即 设置了 hid 在查看源码时只会有一个 title,相同的会被覆盖掉
            { hid: 'description', name: 'description', 
              content: process.env.npm_package_description || '全局的description' }
        ],
        link: [
            // 这里的斜杠 / 指的是static 文件夹
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
            { rel: 'stylesheet', href: '/css/global.css' },
        ]
    }
}

重启后查看源码就可以看到我们设置的head信息了~~

# 设置每个页面的 head、meta 信息

页面个性化设置的时候,需要在页面里写入head函数并返回一个对象,如下:

export default {
    head(){
        return{
             meta: [
                { name: 'keywords', content: this.goods.name },
                { hid: 'description', name: 'description', content: '' }
             ]
        }
    },
    async asyncData({ $axios, store }){
        ...
    },
    data(){
        return{
            dateList: [],
            goods: {}
        }
    }
}

这样就完成了每个页面的个性化的meta等一些head信息

# 全局统一设置每个页面的 head信息

每个页面的个性化设置head信息可以每个页面都写一个head函数去设置,但显得臃肿也不利于维护。我们可以在pluginsmixins文件里混入一个全局方法,每个页面去调用,以此来实现个性化的meta信息设置。

import Vue from 'vue'

Vue.mixin({
    methods: {
        // 全局统一设置个性化 head
        $seo(title, content, metaInfo = []) {
            return {
                title,
                meta: [{
                    hid: 'description',
                    name: 'keywords',
                    content
                }].concat(metaInfo)
            }
        }
    }
})

混入后,每个页面使用如下:

export default {
    head(){
        // 调用全局的个性化设置 meta
        return this.$set(this.goods.title, this.goods.desc, [{}]);
    },
    async asyncData({ $axios, store }){
        ...
    },
    data(){
        return{
            dateList: [],
            goods: {}
        }
    }
}

# 定义化 html

处理以上提到的设置head信息的方式,还可以通过定义化html模板来实现,但需要遵循nuxt的一些规则,比如:名称必须为app.html,而且必须用双花括号获得已设置的信息等,如下:

app.html

<!DOCTYPE html>
<html {{HTML_ATTRS}}>

<head {{HEAD_ATTRS}}>
    <!-- nuxt.config.js 中已经设置的信息  -->
    {{HRAD}}
    <!-- 也可以按需增加项目需要的个性内容 -->
</head>

<body {{BODY_ATTRS}}>
    {{APP}}
</body>

</html>
上一篇下一篇

猜你喜欢

热点阅读