如何自定义nuxt默认html模板

Posted 2023-02-22

【中文标题】如何自定义nuxt默认html模板

【英文标题】：How to customize nuxt default html template

【发布时间】：2018-10-27 18:31:17

【问题描述】：

我尝试从 Nuxt 应用程序自定义默认页面，但文档很差：

https://nuxtjs.org/guide/views#document

如果我只想获得例如标题怎么办？还是只有头部的链接？

 HEAD.links 

还是只有元数据？

 HEAD.meta 

我不知道语法，这是把手还是等效的东西？

谢谢！

【参考方案1】：

如果你查看源代码，你会发现只有 4 个自定义元：

html_ATTRS BODY_ATTRS 头 BODY_SCRIPTS

见https://github.com/nuxt/nuxt.js/blob/ef7a42649dcee7e65886b2db1a329deecd93aff2/lib/core/meta.js#L40-L45

---

HEAD 元不是一个对象，而是一个字符串 concat：

// Get vue-meta context
const m = await this.getMeta(url)

...

// HEAD tags
meta.HEAD =
  m.meta.text() +
  m.title.text() +
  m.link.text() +
  m.style.text() +
  m.script.text() +
  m.noscript.text()

所以你不能得到 HEAD.links

---

但是，从您的 nuxt.config.js 文件中，您可以覆盖所有 HEAD 数据。

例如。如果你只想保留title:

替换：

head: 
  title: 'starter',
  meta: [
     charset: 'utf-8' ,
     name: 'viewport', content: 'width=device-width, initial-scale=1' ,
     hid: 'description', name: 'description', content: 'Nuxt.js project' 
  ],
  link: [
     rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' 
  ]

作者：

head: 
  title: 'starter'
,

【讨论】：

感谢您的快速回答！问题是我不想要例如标题。我在 nuxt.config 中没有一个，但 nuxt 在输出中给了我一个空的:(