方案对比

有两种方案，一种是在vue中实现，另一种是放到index.html中，与webpack相结合。

vue中实现

可以选择放到view中的脚本中，也可以放到router的before router中。

与webpack结合

与webpack结合，实现开发时不统计。

在vue的script中

methods: {
    showArticle () {

      _hmt.push(['_trackPageview', '/article?id=' + this.article.id])

      this.$router.push({
        name: 'article',
        query: {
          id: this.article.id
        }
      })
    }, ...

与webpack结合

<% if (htmlWebpackPlugin.options.prod) { %>

      <script>
        // 百度统计
        // TODO：上传到github时注释掉，避免别人用这个博客时，也统计到这里来
        // 自行更改src链接

        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?your_code";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
          // 百度统计
          window.baidu = ({from = (window.urlParams.ADTAG || '-'), type = 'page', event = '-'}) => {
            _hmt.push(['_trackEvent', from, type, event])
          }
        })();

    </script>

    <% } else { %>
      <script>
        var _hmt = {'push':function(event, url){
          console.log('No push to baidu', event, url)
        }}

        // 百度统计
        window.baidu = ({from = (window.urlParams.ADTAG || '-'), type = 'page', event = '-'}) => {
          console.log('dev模式不上报百度统计：', from, type, event)
        }
      </script>
       <script src="https://cdn.jsdelivr.net/npm/leancloud-storage@3.12.0/dist/av-min.js"></script>
    <% } %>

emmm... 在我把代码写完测试后才发现，原来的博客系统早就把上报百度的逻辑写全了，并且比自己的优雅