Merge pull request #6 from chengpeiquan/develop

Develop

README.md

@@ -46,7 +46,7 @@ npm install vue-baidu-analytics --save-dev
 参数|是否必填|参数类型|参数说明
 :-:|:-:|:-:|-
 router|是|object|Vue Router，本插件基于路由使用
-siteIdList|是|object Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
+siteIdList|是|string[]|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
 isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
 
 ## 使用
@@ -97,7 +97,7 @@ createApp(app)
       'bbbbbbbbbbbbbbbbbbb',
       'ccccccccccccccccccc'
     ],
-    isDebug: true
+    isDebug: false
   })
   
   // 挂载到节点上

dist/modules/getRouterMode.d.ts

@@ -0,0 +1,2 @@
+declare const getRouterMode: (vueVersion: number, router: any) => string;
+export default getRouterMode;

dist/vue-baidu-analytics.js

@@ -1,12 +1,12 @@
 /** 
  * name: vue-baidu-analytics
- * version: v2.0.1
+ * version: v2.0.2
  * author: chengpeiquan
  */
  (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.baiduAnalytics = factory());
+  (global = global || self, global.baiduAnalytics = factory());
 }(this, (function () { 'use strict';
 
   var BAIDU = (function () {
@@ -104,6 +104,20 @@
       return version;
   };
 
+  var getRouterMode = function (vueVersion, router) {
+      var mode = 'history';
+      if (vueVersion === 2) {
+          mode = router.mode;
+      }
+      if (vueVersion === 3) {
+          var BASE = router.options.history.base || '';
+          if (BASE.includes('#')) {
+              mode = 'hash';
+          }
+      }
+      return mode;
+  };
+
   function install(Vue, _a) {
       var router = _a.router, siteIdList = _a.siteIdList, _b = _a.isDebug, isDebug = _b === void 0 ? false : _b;
       if (typeof document === 'undefined' || typeof window === 'undefined') {
@@ -127,9 +141,10 @@
           pushBAIDU.init();
       }
       router.afterEach(function (to) {
+          var ROUTER_MODE = getRouterMode(VUE_VERSION, router);
           var PAGE_PATH_DIR_COUNT = window.location.pathname.split('/').length;
           var PAGE_PATH = window.location.pathname.split('/').slice(0, PAGE_PATH_DIR_COUNT - 1).join('/');
-          var PAGE_URL = router.mode === 'hash' ? PAGE_PATH + "/#" + to.fullPath : "" + PAGE_PATH + to.fullPath;
+          var PAGE_URL = ROUTER_MODE === 'hash' ? PAGE_PATH + "/#" + to.fullPath : "" + PAGE_PATH + to.fullPath;
           pushBAIDU.pv(PAGE_URL);
       });
   }

dist/vue-baidu-analytics.min.js

@@ -1,7 +1,7 @@
 /** 
  * name: vue-baidu-analytics
- * version: v2.0.1
+ * version: v2.0.2
  * author: chengpeiquan
  */
- !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).baiduAnalytics=i()}(this,(function(){"use strict";var t=function(){function t(t,i){void 0===t&&(t=""),void 0===i&&(i=!1),this.siteId=t,this.isDebug=i}return t.prototype.init=function(){window._hmt=window._hmt?window._hmt:[];var t=document.createElement("script");t.async=!0,t.src="https://hm.baidu.com/hm.js?"+this.siteId,document.querySelector("head").appendChild(t),this.isDebug&&console.log("[vue-baidu-analytics] siteId load done.\nsiteId:    "+this.siteId)},t.prototype.setAccount=function(){window._hmt.push(["_setAccount",this.siteId])},t.prototype.trackPageview=function(t){if(t&&"string"==typeof t||(t="/"),t.includes("http")){var i=t.split("/"),e=i[0]+"//"+i[2];t=t.replace(e,"")}this.setAccount(),window._hmt.push(["_trackPageview",t]),this.isDebug&&console.log("[vue-baidu-analytics] track pv done.\nsiteId:    "+this.siteId+"\npageUrl:   "+t)},t.prototype.trackEvent=function(t,i,e,n){if("string"!=typeof t||"string"!=typeof i||!t||!i)throw new Error("[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.");e&&"string"==typeof e||(e=""),Number(n)||(n=1),this.setAccount(),window._hmt.push(["_trackEvent",t,i,e,n]),this.isDebug&&console.log("[vue-baidu-analytics] track event done.\nsiteId:   "+this.siteId+"\ncategory: "+t+"\naction:   "+i+"\nlabel:    "+e+"\nvalue:    "+n)},t}(),i=function(){function i(t,i){this.siteIdList=t,this.isDebug=i}return i.prototype.init=function(){var i=this;this.siteIdList.forEach((function(e){new t(e,i.isDebug).init()}))},i.prototype.pv=function(i){var e=this;this.siteIdList.forEach((function(n){new t(n,e.isDebug).trackPageview(i)}))},i.prototype.event=function(i,e,n,o){var s=this;this.siteIdList.forEach((function(a){new t(a,s.isDebug).trackEvent(i,e,n,o)}))},i}();return function(t,e){var n=e.router,o=e.siteIdList,s=e.isDebug,a=void 0!==s&&s;if("undefined"==typeof document||"undefined"==typeof window)return!1;if(!n)throw new Error("[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.");if(!o)throw new Error("[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.");var r=new i(o,a),u=function(t){var i=2,e=String(t.version);return"2."===e.slice(0,2)&&(i=2),"3."===e.slice(0,2)&&(i=3),i}(t)||2;2===u&&(t.prototype.$pushBAIDU=r),3===u&&(t.config.globalProperties.$pushBAIDU=r),o&&r.init(),n.afterEach((function(t){var i=window.location.pathname.split("/").length,e=window.location.pathname.split("/").slice(0,i-1).join("/"),o="hash"===n.mode?e+"/#"+t.fullPath:""+e+t.fullPath;r.pv(o)}))}}));
+ !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t=t||self).baiduAnalytics=i()}(this,(function(){"use strict";var t=function(){function t(t,i){void 0===t&&(t=""),void 0===i&&(i=!1),this.siteId=t,this.isDebug=i}return t.prototype.init=function(){window._hmt=window._hmt?window._hmt:[];var t=document.createElement("script");t.async=!0,t.src="https://hm.baidu.com/hm.js?"+this.siteId,document.querySelector("head").appendChild(t),this.isDebug&&console.log("[vue-baidu-analytics] siteId load done.\nsiteId:    "+this.siteId)},t.prototype.setAccount=function(){window._hmt.push(["_setAccount",this.siteId])},t.prototype.trackPageview=function(t){if(t&&"string"==typeof t||(t="/"),t.includes("http")){var i=t.split("/"),e=i[0]+"//"+i[2];t=t.replace(e,"")}this.setAccount(),window._hmt.push(["_trackPageview",t]),this.isDebug&&console.log("[vue-baidu-analytics] track pv done.\nsiteId:    "+this.siteId+"\npageUrl:   "+t)},t.prototype.trackEvent=function(t,i,e,n){if("string"!=typeof t||"string"!=typeof i||!t||!i)throw new Error("[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.");e&&"string"==typeof e||(e=""),Number(n)||(n=1),this.setAccount(),window._hmt.push(["_trackEvent",t,i,e,n]),this.isDebug&&console.log("[vue-baidu-analytics] track event done.\nsiteId:   "+this.siteId+"\ncategory: "+t+"\naction:   "+i+"\nlabel:    "+e+"\nvalue:    "+n)},t}(),i=function(){function i(t,i){this.siteIdList=t,this.isDebug=i}return i.prototype.init=function(){var i=this;this.siteIdList.forEach((function(e){new t(e,i.isDebug).init()}))},i.prototype.pv=function(i){var e=this;this.siteIdList.forEach((function(n){new t(n,e.isDebug).trackPageview(i)}))},i.prototype.event=function(i,e,n,o){var s=this;this.siteIdList.forEach((function(a){new t(a,s.isDebug).trackEvent(i,e,n,o)}))},i}();return function(t,e){var n=e.router,o=e.siteIdList,s=e.isDebug,a=void 0!==s&&s;if("undefined"==typeof document||"undefined"==typeof window)return!1;if(!n)throw new Error("[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.");if(!o)throw new Error("[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.");var r=new i(o,a),u=function(t){var i=2,e=String(t.version);return"2."===e.slice(0,2)&&(i=2),"3."===e.slice(0,2)&&(i=3),i}(t)||2;2===u&&(t.prototype.$pushBAIDU=r),3===u&&(t.config.globalProperties.$pushBAIDU=r),o&&r.init(),n.afterEach((function(t){var i=function(t,i){var e="history";return 2===t&&(e=i.mode),3===t&&(i.options.history.base||"").includes("#")&&(e="hash"),e}(u,n),e=window.location.pathname.split("/").length,o=window.location.pathname.split("/").slice(0,e-1).join("/"),s="hash"===i?o+"/#"+t.fullPath:""+o+t.fullPath;r.pv(s)}))}}));
 //# sourceMappingURL=vue-baidu-analytics.min.js.map

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-baidu-analytics",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A data collection tool that supports reporting of single-page application data built by Vue 3.0 & 2.0 & VuePress, based on baidu statistics.",
   "main": "dist/vue-baidu-analytics.min.js",
   "types": "vue-baidu-analytics.d.ts",

src/main.ts

@@ -1,5 +1,6 @@
 import PushBAIDU from '@m/pushBAIDU'
 import getVueVersion from '@m/getVueVersion'
+import getRouterMode from '@m/getRouterMode'
 
 /** 
  * 定义插件
@@ -50,10 +51,17 @@ export default function install (Vue: Vue, { router, siteIdList, isDebug = false
    * 路由切换时执行PV上报
    */
   router.afterEach( (to: To) => {
-    const PAGE_PATH_DIR_COUNT = window.location.pathname.split('/').length;
-    const PAGE_PATH = window.location.pathname.split('/').slice(0, PAGE_PATH_DIR_COUNT - 1).join('/');
-    const PAGE_URL = router.mode === 'hash' ? `${PAGE_PATH}/#${to.fullPath}` : `${PAGE_PATH}${to.fullPath}`;
+    // 根据Vue版本获取路由模式
+    const ROUTER_MODE: string = getRouterMode(VUE_VERSION, router);
     
+    // 获取页面的url信息
+    const PAGE_PATH_DIR_COUNT: number = window.location.pathname.split('/').length;
+    const PAGE_PATH: string = window.location.pathname.split('/').slice(0, PAGE_PATH_DIR_COUNT - 1).join('/');
+
+    // 根据路由模式生成要上报的链接
+    const PAGE_URL: string = ROUTER_MODE === 'hash' ? `${PAGE_PATH}/#${to.fullPath}` : `${PAGE_PATH}${to.fullPath}`;
+    
+    // 上报数据
     pushBAIDU.pv(PAGE_URL);
   });
 }

src/modules/getRouterMode.ts

@@ -0,0 +1,26 @@
+/** 
+ * 获取Vue的版本
+ * @param {number} vueVersion - vue版本号，2=Vue2.x, 3=Vue3.x
+ * @param {object} router - vue路由
+ * @return hash=hash模式、history=history模式
+ */
+const getRouterMode = (vueVersion: number, router: any): string => {
+  let mode: string = 'history';
+
+  // 2.x直接读取mode即可
+  if ( vueVersion === 2 ) {
+    mode = router.mode;
+  }
+
+  // 3.x需要判断一下
+  if ( vueVersion === 3 ) {
+    const BASE: string = router.options.history.base || '';
+    if ( BASE.includes('#') ) {
+      mode = 'hash';
+    }
+  }
+  
+  return mode;
+}
+
+export default getRouterMode;