非标准元素未出现在 <head>

Question

我正在使用

vue-meta: ^2.4.0

填充我的 Nuxt 网站的

<head>

。除了添加非标准 HTML 元素之外，一切都按预期工作。在这种情况下，我希望

<nonstandard href="${process.env.SOME_VALUE_FROM_ENV}">

位于

<head>

中，但它永远不会出现，即使我用一个简单的值对其进行硬编码。不支持非标准元素吗？

我的

nuxt.config.js

如下：

module.exports = {
  head: {

    // works
    htmlAttrs: {
      lang: 'en'
    },

    // works
    link: [
      { rel: 'shortcut icon', href: '/images/favicon.ico', type: 'image/ico' }
    ],

    // works
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
      { 'http-equiv': 'X-UA-Compatible', content: 'IE=Edge' }
    ],
    
    // NONE OF THESE APPROACHES WORK
    nonstandard: [
      { href: '${process.env.SOME_VALUE_FROM_ENV}' },
      { innerHTML: `href="${process.env.SOME_VALUE_FROM_ENV}"` }
    ],
    innerHTML: `<nonstandard href="${process.env.SOME_VALUE_FROM_ENV}" />`,
    
    // works
    script: [
      {
        innerHTML: `
          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','xxxxxxxxxxx');
        `
      }
    ],

    // works
    noscript: [
      {
        innerHTML: `
          <iframe src="https://www.googletagmanager.com/ns.html?id=xxxxxxxxxxx"
          height="0" width="0" style="display:none;visibility:hidden"></iframe>
        `,
        pbody: true
      }
    ],
    __dangerouslyDisableSanitizers: ['script', 'noscript', 'nonstandard'],
  }
}

Answer 1

按照 @DengSihan 的建议，我能够通过自定义

app.html

填充该值，该值是我作为

nuxt.config.js

文件的同级文件创建的。

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <nonstandard href="{{ ENV.SOME_VALUE_FROM_ENV }}">
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

在我的

nuxt.config.js

：

module.exports = {
  env: {
    SOME_VALUE_FROM_ENV: process.env.SOME_VALUE_FROM_ENV
  }
}

由此我们可以得出结论，

vue-meta

无法用非标准元素填充头部，必须使用自定义的

app.html

来代替。不知道为什么这个问题被否决了。这是一个独特的案例。

非标准元素未出现在 <head>

问题描述投票：0回答：1

1个回答

最新问题

非标准元素未出现在 <head>

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1