Vue3集成VueMatomo报错：window.Piwik未定义问题求助

1. 排查环境变量有效性 #

确认process.env.VUE_APP_MATOMO_HOST和process.env.VUE_APP_MATOMO_WEBSITE_ID是否正确加载。在main.js中添加日志输出，验证变量值是否为空或地址错误：

console.log('Matomo Host:', process.env.VUE_APP_MATOMO_HOST);
console.log('Matomo Site ID:', process.env.VUE_APP_MATOMO_WEBSITE_ID);

若变量未正确注入，需检查.env文件配置或构建工具的环境变量传递逻辑。

2. 解决Matomo库冲突 #

你同时使用了vue-matomo和@datapunt/matomo-tracker-js两个跟踪库，二者会互相干扰。vue-matomo已封装完整的Matomo跟踪能力，无需额外引入其他库。

修改组件中的事件跟踪代码，直接使用vue-matomo提供的实例：

// 移除 import { MatomoTracker } from '@datapunt/matomo-tracker-js';
this.$matomo.trackEvent('Checkbox', 'Click', this.checked ? 'Checked' : 'Unchecked');

3. 手动加载Matomo脚本（自动加载失败时） #

若vue-matomo的自动脚本加载机制失效，可手动在public/index.html的<head>中添加Matomo跟踪脚本：

<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u = `${process.env.VUE_APP_MATOMO_HOST}/`;
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', `${process.env.VUE_APP_MATOMO_WEBSITE_ID}`]);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

同时修改vue-matomo配置，关闭自动加载并指定脚本地址：

app.use(VueMatomo, {
  router,
  host: process.env.VUE_APP_MATOMO_HOST,
  siteId: process.env.VUE_APP_MATOMO_WEBSITE_ID,
  scriptUrl: `${process.env.VUE_APP_MATOMO_HOST}/matomo.js`,
  autoLoad: false
})

4. 检查网络与Matomo服务状态 #

在浏览器中直接访问${process.env.VUE_APP_MATOMO_HOST}/matomo.js，确认脚本能正常加载。若无法访问，需排查网络连通性或Matomo服务是否正常运行。

5. 调整脚本加载超时时间 #

若Matomo脚本加载较慢，可延长vue-matomo的等待超时：

app.use(VueMatomo, {
  router,
  host: process.env.VUE_APP_MATOMO_HOST,
  siteId: process.env.VUE_APP_MATOMO_WEBSITE_ID,
  waitForScript: 5000 // 超时时间改为5秒
})

内容的提问来源于stack exchange，提问作者Skander Ellouze