通过firebase hosting部署web页面，集成firebase sdk analysis功能的一些问题-优快云博客

本文链接：https://blog.youkuaiyun.com/zuilbie1987/article/details/143213731

使用firebase hosting部署web页面后，如果想集成firebase analysis功能，也就是数据埋点、上报、分析，Google给出了针对于hosting用户的特定的集成sdk的方法。

1.首先是应用预留网址加载 Firebase SDK
参考文档：https://firebase.google.com/docs/hosting/reserved-urls?hl=zh-cn
通过预留网址可以直接加载sdk, 在<body>中注入

<script src="/__/firebase/8.10.1/firebase-app.js"></script>

等需要用到的功能即可。

2.在调用sdk时我遇到了一些问题，firebase web sdk加载后在”/__/firebase/“这么个文件夹里，如果按照文档中的import流程会出现Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../". 例如使用

import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';

但如果你使用相对路径来去定位模块的话，又会出现Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

之后我又尝试直接调用firebase-analytics.js，也会出现问题。

寻找了很多解决方法，最后发现由于hosting在你引入firebase sdk时就已经为你导入了相关的模块，所以在具体执行的jason文件中就无需再次引入了。故此，在执行jason中无需import那些模块！无需import那些模块！无需import那些模块！

3.但是在<body>中需要引入需要用到的sdk, 例如如果需要用到analysis，就需要引入

<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>

4.Hosting使用预留网址加载 Firebase SDK只能适用于版本 8 及更低版本，不能将版本 9 或更高版本与 Hosting 网址搭配使用。由于firebase已经升级到13.x，之后对于这部分的功能支持是否有兼容和更新就不得而知了。

5.另外，在<body>中引入firebase/init.js之后，在执行jason文件中无需再次使用

const app = initializeApp(firebaseConfig);

来重新加载firebase

以上是在firebase hosting中集成firebase analytics功能中遇到的问题的解决方案，望可以帮助遇到同样问题的同学。

庆祝1024节，今天写了点代码。

2024.10.24