尝试使用 Firebase 模拟器运行整个应用程序时，Firebase Nuxt 无法识别“位置”对象

Question

我的 firebase Nuxt 应用最近从 SPA 模式转换为 SSR。在 SPA 模式下一切正常，但是当我尝试转换它时，它产生了很多错误。我试图一一解决它们，但我遇到了错误ReferenceError 'location' was not defined。我想运行我的模拟器，因为如果它完全在 SSR 模式下运行，我想测试我的其他功能。

import firebaseTmp from "firebase/app";
import firebaseErrorsJa from "~/plugins/firebaseErrorsJa";
import "firebase/storage";
import "firebase/firestore";
import 'firebase/auth';
import 'firebase/functions';

const config = process.env.firebaseConfig;

if (!firebaseTmp.apps.length) {
  firebaseTmp.initializeApp(config);
}
const db = firebaseTmp.firestore();
const functions = firebaseTmp.functions();
const firebase = firebaseTmp;
const firestore = firebaseTmp.firestore();
const storage = firebaseTmp.storage();
const auth = firebaseTmp.auth();
const firestoreTimestamp = firebaseTmp.firestore.Timestamp;
const serverTimestamp = firebaseTmp.firestore.FieldValue.serverTimestamp();
const firebaseErrors = firebaseErrorsJa;

if (location.hostname === "localhost") {
  db.settings({
    host: "localhost:8000",
    ssl: false
  });

  functions.useEmulator("localhost", 5001);
  auth.useEmulator('http://localhost:9099/');
}

export { db, firebase, firestore, auth, storage, firestoreTimestamp, serverTimestamp, functions, firebaseErrors }

我导入了几乎所有的库，但仍然无法正常工作。 注意：这只发生在 SSR 模式下。这是否意味着location在SSR模式下不起作用？

我试图删除其中包含“位置”的代码块。它在本地运行良好，但是当我尝试运行其他功能时，它会生成CORS error。它访问我们部署函数时使用的链接。

https://us-central1-talkfor-dev.cloudfunctions.net/v1-auth-updateUser

• 这是控制台中显示的链接

我的预期是us-central1-talkfor-dev.cloudfunctions.net 将是localhost:5000，因为我们使用的是本地开发。

你知道为什么会这样吗？

Answer 1

Alex，您了解 SSR 模式正在尝试在服务器上呈现网站。这可以是您本地运行的服务器实例，这意味着没有window 对象可供它访问位置变量。位置只能在浏览器内访问。 SSR 上下文不在浏览器中，因此完全有意义。

Window.location 在这里声明。

Server vs Browser environments 这里声明

因为您在 Node.js 环境中...您无权访问窗口或文档对象...但是您可以通过使用 beforeMount 或安装的挂钩来使用窗口或文档。 .

你为什么不试试这些，

• 像这样使用beforeMount 和mounted 挂钩。

beforeMount () {
  window.alert('hello');
}
mounted () {
  window.alert('hello');
}

• 使用process.client 环境变量

if (process.client) {
  // Do your stuff here
  // I think this is what you are looking for.
}