vue-gtag：无法加载gtag.js

编程问答 2022-06-22

问题描述

一般来说，我是javascript框架的新手，正在尝试学习vue。我正在尝试使用Google Analytics（分析）来收集我网站上的数据，因此我正在使用vue-gtag。我遵循了一些youtube教程，并到达了这里：

package.json 

    ...
    "build": "vue-cli-service build"
  },"dependencies": {
    "@braid/vue-formulate": "^2.4.3","axios": "^0.20.0","browser-image-compression": "^1.0.12","core-js": "^3.6.5","register-service-worker": "^1.7.1","vue": "^2.6.11","vue-gtag": "^1.9.1","vue-navigation-bar": "^4.0.2","vue-router": "^3.2.0","vuejs-datatable": "^2.0.0-alpha.7","vuex": "^3.4.0"
  },"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",...

main.ts 

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

// @ts-ignore
import VueNavigationBar from "vue-navigation-bar";
import { VuejsDatatableFactory} from 'vuejs-datatable'
import VueGtag from "vue-gtag";

import "./helpers/vue-navigation-bar.css";

declare module 'vue/types/vue' {
  interface Vue {
    $formulate: {
      handle: (err: typeof Error,formName: string,skip?: boolean) => void | typeof Error;
      reset: <V>(formName: string,initialValue?: V) => void;
      resetValidation: (formName: string) => void;
      setValues: <V>(formName: string,values: V) => void;
    };
  }
}

Vue.config.productionTip = true;
Vue.component("vue-navigation-bar",VueNavigationBar);
Vue.use(VuejsDatatableFactory);
Vue.use(VueGtag,{
  config: { id: "my id thingy" }
});

new Vue({
  router,store,render: h => h(App)
}).$mount('#app')

当我在本地主机上运行此程序时，我期望Google Analytics（分析）显示一个实时用户（根据我看到的youtube视频），但没有。这是我的浏览器控制台中的错误：

[vue-gtag] Ops! Something happened and gtag.js Couldn't be loaded vue-gtag.esm.js:105:11
    warn webpack-internal:///./node_modules/vue-gtag/dist/vue-gtag.esm.js:105
    _bootstrap webpack-internal:///./node_modules/vue-gtag/dist/vue-gtag.esm.js:503
    (Async: promise callback)
    _bootstrap webpack-internal:///./node_modules/vue-gtag/dist/vue-gtag.esm.js:502
    install webpack-internal:///./node_modules/vue-gtag/dist/vue-gtag.esm.js:561
    use VueJS
    <anonymous> webpack-internal:///./src/main.ts:37
    ts http://localhost:8080/js/app.js:1910
    __webpack_require__ http://localhost:8080/js/app.js:854
    fn http://localhost:8080/js/app.js:151
    1 http://localhost:8080/js/app.js:2055
    __webpack_require__ http://localhost:8080/js/app.js:854
    checkDeferredModules http://localhost:8080/js/app.js:46
    <anonymous> http://localhost:8080/js/app.js:994
    <anonymous> http://localhost:8080/js/app.js:997

除了Ops!之外，如果有人可以指出我出了错的地方，我将不胜感激。 预先谢谢你。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

analyticsgoogle-analyticsgtag.jsjavascriptvue.js