全局设置
在 nuxt.config.js
中配置网站 title
、ico
和 meta
标签:
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
],
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico',
},
],
},
单独配置
为某个单独页面配置 title
、ico
和 meta
标签:
使用 head
方法设置当前页面的头部标签。
在 head
方法里可通过 this
关键字来获取组件的数据,你可以利用页面组件的数据来设置个性化的 meta
标签。
注意:为了避免子组件中的 meta 标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用 hid
键为 meta 标签配一个唯一的标识编号。
export default {
...
head() {
return {
title: this.$t('home.title'),
meta: [
{ hid: 'description', name: 'description', content: this.$t('home.description') },
{ hid: 'og:site_name', property: 'og:site_name', content: 'hstream.io' },
{ hid: 'og:type', property: 'og:type', content: 'website' },
{ hid: 'og:title', property: 'og:title', content: this.$t('home.title') },
{ hid: 'og:description', property: 'og:description', content: this.$t('home.description') },
{ hid: 'og:url', property: 'og:url', content: 'https://xxxx.com' + this.$route.path },
{
hid: 'og:image',
property: 'og:image',
content: '/images/logo.png',
},
],
}
},
}