Vue / Nuxt - 将真正特定的标签添加到 <head>

【问题标题】：Vue / Nuxt - Add really specific tag to <head>Vue / Nuxt - 将真正特定的标签添加到 <head>
【发布时间】：2021-11-20 19:08:07
【问题描述】：

我正在使用 Vue/Nuxt 生成静态页面模板，但我不知道是否有任何方法可以在生成的每个页面中添加一个真正特定的标签。它不是元、脚本、样式或链接——似乎 nuxt.config.js 中唯一的默认方式是用于脚本、链接或元标记。这些是需要注入的标签：

<v65:metaTags></v65:metaTags>
<v65:customFile file="/v65html/_headassets.htm"></v65:customFile>

这些标签是从 CMS 系统生成的，不幸的是需要在每个页面上。谢谢。

【问题讨论】：

这能回答你的问题吗？ How to add a 3rd party script code into Nuxt?
这种标签是什么？

标签： vue.js nuxt.js

【解决方案1】：

在nuxt中你可以覆盖默认的.nuxt/views/app.template.html。

您需要在项目的根目录下创建app.html 文件。然后将以下代码放入此文件中：

app.html

<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

然后你可以在head标签中添加任何你想要的标签。

<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <v65:metaTags></v65:metaTags>
    <v65:customFile file="/v65html/_headassets.htm"></v65:customFile>
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

【讨论】：

非常感谢！您是否有机会知道是否可以为一页使用不同的模板？