在 Nuxt.js 中使用 Vue-Meta 内联 Js

Posted 2023-02-22

【中文标题】在 Nuxt.js 中使用 Vue-Meta 内联 Js

【英文标题】：Inline Js with Vue-Meta In Nuxt.js

【发布时间】：2020-01-24 07:34:13

【问题描述】：

基本上，我使用 Nuxt 2.9.2，并尝试使用 innerhtml 方法内联 Google Optimize 脚本，但每当我运行 npm run generate 时，即使 __dangerouslyDisableSanitizers 将 innerHTML 列入白名单，代码也会改变某些方面。

这是我在 Nuxt Config 头对象中的脚本

script: [
    
      innerHTML: `(function(a,s,y,n,c,h,i,d,e)s.className+=' '+y;h.start=1*new Date;h.end=i=function()s.className=s.className.replace(RegExp(' ?'+y),'');(a[n]=a[n]||[]).hide=h;setTimeout(function()i();h.end=null,c);h.timeout=c;)(window,document.documentElement,'async-hide','dataLayer', 500 , $JSON.stringify(
         [process.env.GOOGLE_OPTIMIZE_ID]: true 
      ))`
    
  ],
  __dangerouslyDisableSanitizers: ['innerHTML']
,

如下所示，尝试了多种不同的方法。无法按预期内联

  !function(e,n,t,a,c,s,d)n.className+=" "+t,s.start=1*new Date,s.end=d=function()n.className=n.className.replace(RegExp(" ?"+t),""),(e[a]=e[a]||[]).hide=s,setTimeout(function()d(),s.end=null,500),s.timeout=500(window,document.documentElement,"async-hide","dataLayer",0,"GTM-XXXXXX":!0)

应该是

(function(a,s,y,n,c,h,i,d,e)s.className+=' '+y;h.start=1*new Date;h.end=i=function()s.className=s.className.replace(RegExp(' ?'+y),'');(a[n]=a[n]||[]).hide=h;setTimeout(function()i();h.end=null,c);h.timeout=c;)(window,document.documentElement,'async-hide','dataLayer', 500 , 'GTM-XXXXXX'': true 
        ))

【问题讨论】：

你试过__dangerouslyDisableSanitizers: ['script'], 吗？

【参考方案1】：

        script: [
          
            innerHTML: `window.MY_CONST = 'abcd1234'`,
            type: 'text/javascript',
            charset: 'utf-8',
          ,
        ],
        __dangerouslyDisableSanitizers: ['script', 'innerHTML'],