Nuxt - 每个页面单独设置 SEO 相关标签及网页标题、图标等（页面配置 head）

前言

您一定知道，要想配置一些 SEO 相关的标签，就要在项目根目录下 nuxt.config.js → head 字段进行。

请注意，nuxt.config.js 文件中所配置的是全局的，

并非 “独立” 应用到每个页面，也就是说所有页面都用这个全局配置。

---

但要是想要更加 “全面 SEO” ，您必须为每个页面 单独设置。

解决方案

Nuxt 提供了便捷的钩子，可以让我们在页面中轻松定义。

例如 index.vue 页面，为其配置的代码如下：

<template>
  <div>
	...
  </div>
</template>

<script> export default {
       data() {
       return {
      } }, // 与 data 钩子函数同级 head() {
       // 直接返回所有SEO相关及页面配置 return {
       title: "我是标题", meta: [ {
       charset: "utf-8" }, {
       name: "viewport", content: "width=device-width, initial-scale=1" }, {
       hid: "description", name: "description", content: "我是首页内容，这是描述" }, {
       name: "renderer", content: "webkit" }, // 更多标签... ], // 该页图标 // link: [{ rel: "icon", type: "image/x-icon", href: "/favicon1.ico" }], } }, } </script>

每个页面都具有 head() 这个钩子函数。