# Vue或VuePress添加不蒜子统计 {#vue或vuepress添加不蒜子统计}

VuePress如何添加不蒜子

# 一、添加依赖 {#一、添加依赖}

• yarn安装

  yarn add busuanzi.pure.js

• npm安装

  npm install busuanzi.pure.js --save

# 二、修改meta {#二、修改meta}

在你的页面中加入:

<meta name="referrer" content="no-referrer-when-downgrade">

VuePress在 head.js 中添加，写法如下：

['meta', {name: 'referrer', content: 'no-referrer-when-downgrade'}],

注意

在 Chrome 85 版本中，为了保护用户的隐私，默认的 Referrer Policy 则变成了 strict-origin-when-cross-origin

所以必须加入此部分代码，否则文章统计访问量的数据则不正确

# 三、代码示例 {#三、代码示例}

<template>
  <div class="busuanzi">
    <span id="busuanzi_container_site_pv" style="display:none">
      本站总访问量
      <span id="busuanzi_value_site_pv"></span>次
      <span class="post-meta-divider">|</span>
    </span>
    <span id="busuanzi_container_site_uv" style="display:none">
      本站访客数
      <span id="busuanzi_value_site_uv"></span>人
    </span>
  </div>
</template>
 
<script>
let script;
export default {
  mounted() {
    script = require("busuanzi.pure.js");
  },
  // 监听,当路由发生变化的时候执行
  watch: {
    $route(to, from) {
      if (to.path != from.path) {
        script.fetch();
      }
      // console.log(to.path);
    }
  }
};
</script>

# 四、参考文章 {#四、参考文章}

vue 添加 不蒜子 统计计数

解决不蒜子 (busuanzi) 文章计数出错问题