# 前言
在做一些SEO的时候，一般会设置meta信息，或者做移动端项目的时候会设置一下视口等。我们一起看下在nuxt中如何设置meta和head内容的，以及如何定义化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函数去设置，但显得臃肿也不利于维护。我们可以在plugins的mixins文件里混入一个全局方法，每个页面去调用，以此来实现个性化的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>
网友评论