如何在Vue Nuxt 3项目中包含外部javascript [StatCounter]?

k5hmc34c  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(355)

我需要在一个Nuxt 3项目中包含以下代码,但似乎无法让它工作:

<script type="text/javascript">
var sc_project=XXXXXXXX; 
var sc_invisible=1; 
var sc_security="XXXXXXXX"; 
</script>

<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics
Made Easy - Statcounter" href="https://statcounter.com/"
target="_blank"><img class="statcounter"
src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/"
alt="Web Analytics Made Easy - Statcounter"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of Statcounter Code -->

在Vue(没有Nuxt)中,有/曾经有一个index.html页面,我用来放置这段代码,但在Nuxt 3项目中不再有index.html文件。

ndasle7k

ndasle7k1#

useHead()函数

您可以在app.vue文件脚本中使用该命令:

useHead({
  script: [
    { src: "https://www.statcounter.com/counter/counter.js", body: true },
    {
      children:
        "var sc_project=XXXXXXXX;  var sc_invisible=1;  var sc_security='XXXXXXXX'; ",
      body: true,
    },
  ],
  noscript: [
    {
      children:
        "<div class='statcounter'><a title='Web Analytics Made Easy - Statcounter' href='https://statcounter.com/' target='_blank'><img class='statcounter' src='https://c.statcounter.com/XXXXXX/0/XXXXXX/1/' alt='Web Analytics Made Easy - Statcounter' referrerPolicy='no-referrer-when-downgrade'></a></div>",
      body: true,
    },
  ],
});

进一步了解:https://nuxt.com/docs/getting-started/seo-meta#components


nuxt.config.ts文件中使用以下代码:

export default defineNuxtConfig({
  srcDir: "src/",
  app: {
    buildAssetsDir: "btc-gift/",
    head: {
      htmlAttrs: { dir: "rtl", lang: "fa" },
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
      script: [
        { src: "https://www.statcounter.com/counter/counter.js", body: true },
        {
          children:
            "var sc_project=XXXXXXXX;  var sc_invisible=1;  var sc_security='XXXXXXXX'; ",
          body: true,
        },
      ],
      noscript: [
        {
          children:
            "<div class='statcounter'><a title='Web Analytics Made Easy - Statcounter' href='https://statcounter.com/' target='_blank'><img class='statcounter' src='https://c.statcounter.com/XXXXXX/0/XXXXXX/1/' alt='Web Analytics Made Easy - Statcounter' referrerPolicy='no-referrer-when-downgrade'></a></div>",
          body: true,
        },
      ],
    },
  },

进一步了解:https://nuxt.com/docs/api/configuration/nuxt-config#head

组件

在模板中使用<NoScript><Script>组件:

<template>     
   <Script :body="true">
     var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security="XXXXXXXX";
   </Script>
   <Script
     type="text/javascript"
     src="https://www.statcounter.com/counter/counter.js"
     :async="true"
   ></Script>
   <NoScript :body="true">
     <div class="statcounter">
       <a
         title="Web Analytics Made Easy - Statcounter"
         href="https://statcounter.com/"
         target="_blank"
         ><img
           class="statcounter"
           src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/"
           alt="Web Analytics Made Easy - Statcounter"
           referrerPolicy="no-referrer-when-downgrade"
        /></a>
     </div>
   </NoScript>
</template>

进一步了解:https://nuxt.com/docs/getting-started/seo-meta#body-tags

结果将是:

相关问题