为什么我的 Vue+Vite 应用程序在我添加 firebase 分析导入后立即崩溃？答案

【问题标题】：Why does my Vue+Vite app break as soon as I add firebase analytics import?为什么我的 Vue+Vite 应用程序在我添加 firebase 分析导入后立即崩溃？
【发布时间】：2022-12-11 13:23:28
【问题描述】：

我有一个使用 firebase firestore、托管和身份验证的应用程序，我想向它添加分析。我正在关注文档：

https://firebase.google.com/docs/analytics/get-started?authuser=0&platform=web

当我完成第 3 步：添加 Analytics JS SDK 并初始化 Analytics 时，我的应用程序无法呈现。没有错误，我只是在浏览器中看到一个空白屏幕而不是应用程序。

我发现添加第一行后应用程序就会中断：

import { getAnalytics } from "firebase/analytics";

我究竟做错了什么？
等等，我真的什么都没做……
怎么了？

我的依赖项：

"dependencies": {
   "firebase": "^9.12.1",
   "pinia": "^2.0.23",
   "vue": "^3.2.37",
   "vue-i18n": "^9.2.2",
   "vue-router": "^4.1.5"
},
"devDependencies": {
   "@vitejs/plugin-vue": "^3.1.0",
   "sass": "^1.55.0",
   "vite": "^3.1.0"
}

【问题讨论】：

标签： javascript firebase vue.js google-analytics firebase-analytics

【解决方案1】：

我遇到了类似的问题（在 Svelte 中，而不是 Vue），在我的例子中，这是由于运行了一个广告拦截器，触发了“分析”这个词。

您可以尝试使用 loadModule 模式 seen here 围绕此导入编写一些条件逻辑。

【讨论】：