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

关键词：

【中文标题】在 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'],

【讨论】：

使用 nuxt-mail 在 Nuxt.js 中发送邮件

】使用nuxt-mail在Nuxt.js中发送邮件【英文标题】：SendingmailinNuxt.jswithnuxt-mail【发布时间】：2021-07-1011:05:47【问题描述】：我是Nuxt.js/Vue.js的新手，所以这里有一些新手问题：D我在从Nuxt.js应用程序中的联系人发送邮件时遇到问题。... 查看详情

如何使用 Nuxt.js 仅在一个组件中使用插件？

】如何使用Nuxt.js仅在一个组件中使用插件？【英文标题】：HowtouseplugininonlyonecomponentusingNuxt.js?【发布时间】：2021-11-1617:45:13【问题描述】：我正在用nuxt.js做一个简单的博客网站，我只需要在一个组件中导入编辑器，我不想使用n... 查看详情

Tabulator + Nuxt.js：如何在回调中使用 axios？

】Tabulator+Nuxt.js：如何在回调中使用axios？【英文标题】：Tabulator+Nuxt.js:Howtouseaxiosincallbacks?【发布时间】：2020-01-1608:48:53【问题描述】：我尝试在我的Nuxt.js项目中添加Tabulator。我已经完成了下一个组件：<template><divref="table... 查看详情

在现有 Nuxt.js 项目中使用 Express.js

】在现有Nuxt.js项目中使用Express.js【英文标题】：UseExpress.jsinanexistingNuxt.jsproject【发布时间】：2018-12-0407:50:29【问题描述】：我有一个使用Nuxt.js构建的项目，我想使用express来报告我的asyncData方法等的bugsnag错误。我将如何导入它... 查看详情

在 Nuxt.js 项目中使用 normalize.css 的最佳方式是啥？

】在Nuxt.js项目中使用normalize.css的最佳方式是啥？【英文标题】：Whatisthebestwayofusingnormalize.cssinNuxt.jsprojects?在Nuxt.js项目中使用normalize.css的最佳方式是什么？【发布时间】：2019-12-1414:44:25【问题描述】：我使用npxcreate-nuxt-app命令... 查看详情

如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误

】如何在Nuxt.js中使用CKEditor-未定义窗口错误【英文标题】：HowtouseCKEditorwithNuxt.js-windowisnotdefinederror【发布时间】：2020-08-1503:00:36【问题描述】：在Vue.js中，这是我使用的设置。在Nuxt.js中，我收到“未定义窗口”错误。根据我的... 查看详情

如何使用 laravel 后端 API 在 nuxt.js 中上传图片

】如何使用laravel后端API在nuxt.js中上传图片【英文标题】：howtouploadimageinnuxt.jsusinglaravelbackendAPI【发布时间】：2021-01-2407:29:30【问题描述】：nuxt.js我搜索了很多关于使用laravelapi上传图片的教程，但我不知道如何编码图片上传的东... 查看详情

如何在 Nuxt.js 中使用官方 Swiper.js 作为插件

】如何在Nuxt.js中使用官方Swiper.js作为插件【英文标题】：HowtouseofficialSwiper.jsasplugininNuxt.js【发布时间】：2021-01-2106:39:49【问题描述】：我有插件swiper.js代码：importVuefrom"vue";//importSwipercoreandrequiredcomponentsimportSwiperCore,Navigation,Pagina... 查看详情

在nuxt.js中怎么使用vux

参考技术A把this换成Vue就好了Vue.$vux.alert.show(title:'哎呀！',content:'您的信息还在审核中',); 查看详情

如何使用 jest 在 nuxt.js 中测试 head()

】如何使用jest在nuxt.js中测试head()【英文标题】：Howtotesthead()innuxt.jsusingjest【发布时间】：2020-05-1418:26:53【问题描述】：我正在使用带有Jest的Nuxt.js进行单元测试。我在布局中添加了一个head函数来更改标题，我想对其进行单元测... 查看详情

如何在 nuxt.js 中定义路由

....js【发布时间】：2019-04-2421:11:53【问题描述】：我有一个使用Nuxt.Js的博客网站，假设xyz.com并希望显示特定国家/地区代码的所有页面，例如xyz.com/en/home、xyz.com/en/about等。，目的是显示所有国家/地区的博客，它不是多语言网站仅... 查看详情

如何在 nuxt js 中使用 vuetify 作为插件？

】如何在nuxtjs中使用vuetify作为插件？【英文标题】：Howtousevuetifyinnuxtjsasplugin?【发布时间】：2020-04-2321:43:53【问题描述】：我需要在我的nuxtjs项目中使用vuetify作为插件。我试过包@nuxtjs/vuetify，但得到错误无法分配给对象“#”的... 查看详情

如何使用 Nuxt.js 在 vuex 状态中获取本地存储数据

】如何使用Nuxt.js在vuex状态中获取本地存储数据【英文标题】：HowtogetlocalstoragedatainsidevuexstatewithNuxt.js【发布时间】：2019-06-1113:32:09【问题描述】：我正在使用Nuxt构建一个购物车。但是当我刷新页面时，购物篮会自动清空。我尝... 查看详情

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】：Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】：2017-10-2807:01:42【问题描述】：我在Nuxt.js(Vue.js)中开发网络应用程序首先，vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情

如何在 Nuxt.js 中使用 v-file-input 获取文件对象？

】如何在Nuxt.js中使用v-file-input获取文件对象？【英文标题】：Howtogetfileobjectusingv-file-inputinNuxt.js?【发布时间】：2021-03-1904:22:17【问题描述】：我使用了Vuetify.js作为Nuxt.Js的UI框架。当我输入文件我的应用程序时，我想获取文件对... 查看详情

如何在实际服务中运行 nuxt.js？

...rvice?【发布时间】：2017-10-2817:56:32【问题描述】：我在中使用了vue-clivueinitnuxt/expressmyProject和，npm运行开发开发。但是，npm运行构建之后，创建了dist文件。如何在pm2中运行真实服务？（我将在AWSEC中使用ubuntu。）【问题讨论】：... 查看详情

如何在 Nuxt.js Nuxt/Content 博客中使用内容文件夹中的图像设置 og:image

】如何在Nuxt.jsNuxt/Content博客中使用内容文件夹中的图像设置og:image【英文标题】：Howtosetog:imageinNuxt.jsNuxt/Contentblogwithimagesincontentfolders【发布时间】：2021-11-1613:54:36【问题描述】：如何获取已部署图像的最终位置的字符串表示形... 查看详情

如何将 BootstrapVue 在 Nuxt.js 中使用 Purgecss 所需的所有内容列入白名单

】如何将BootstrapVue在Nuxt.js中使用Purgecss所需的所有内容列入白名单【英文标题】：HowdoIwhitelisteverythingIneedforBootstrapVuetoworkwithPurgecssinNuxt.js【发布时间】：2020-02-0506:39:23【问题描述】：我创建了一个Nuxt.js项目，它使用BootstrapVue作... 查看详情