Firebase 托管上的 Flutter 网站适用于域 1，但不适用于域 2

Posted 2023-02-23

【中文标题】Firebase 托管上的 Flutter 网站适用于域 1，但不适用于域 2

【英文标题】：Flutter website on firebase hosting works fine with domain 1 but not domain 2

【发布时间】：2021-05-01 04:53:56

【问题描述】：

我正在使用 Flutter Web 为我的企业创建一个网站。我将它托管在带有 urlhttps://xspectre-9a3b3.web.app/ 的 firebase 托管上 现在当我添加新域时 https://xspectre.net 该网站未在此域中加载并给出错误

main.dart.js:1 Uncaught SyntaxError: Unexpected token '<'
(index):1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://xspectre.net/') with script ('https://xspectre.net/flutter_service_worker.js'): The script has an unsupported MIME type ('text/html').

它也不适用于https://xspectre-9a3b3.firebaseapp.com/。我该怎么办？

编辑

我发现真正的错误不是 MIME 类型，因为它也在我的实际项目中。实际的错误不知何故

Uncaught SyntaxError: Unexpected token '<'

当我打开 main.dart.js 时，它会显示不同的代码。它向我显示了 html 文件而不是 main.dart.js 代码，我认为这就是导致问题的原因。我不知道这两个 URL 的文件有何不同或为何不同。

**编辑 2 **

终于找到了根本问题。 每当我尝试进行 firebase init 时，它都会初始化整个颤振目录。这意味着它说，

You're about to initialize a Firebase project in this directory:

  C:\FlutterProjects\xspectre

而不是

You're about to initialize a Firebase project in this directory:

  C:\FlutterProjects\xspectre\build

现在我需要弄清楚如何在 /build 而不是 root 中进行 firebase init 和 deloy

【问题讨论】：

main.dart.js 不存在，而是返回默认的 index.html 内容。确保您正在构建和部署所有资产并从正确的路径加载它们。

如果问题出在代码上，则不会在 url1 和 url2 中加载

xspectre-9a3b3.web.app 的网站也无法正确加载。您的部署似乎很糟糕（缺少 main.dart.js 和 flutter_service_worker.js），或者您的 firebase 托管配置不正确。您的 firebase.json 文件的内容是什么？

等等，我发现了真正的问题。每当我尝试进行 firebase init 时，它都会初始化整个颤振目录（在问题中有更好的解释）。现在我需要弄清楚如何在 /build 而不是 root 中进行 firebase init

【参考方案1】：

该网站可能仍然适合您，因为它已被服务人员缓存。换个浏览器试试，还是不行。

firebase init 应该在项目目录中运行，而不是在构建目录中。

之后，编辑您的 firebase.json 文件，使其看起来像

  "hosting": 
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      
        "source": "**",
        "destination": "/index.html"
      
    ],
    "headers": [
      
        "source": "**",
        "headers": [
          
            "key": "Cache-Control",
            "value": "no-cache"
          
        ]
      
    ]
  

"public": "build/web" 指向部署文件所在的目录。

现在您可以使用flutter build web 和firebase deploy

【讨论】：

我的 firebase.json 没问题，只是位置不对。但是你的评论帮助我解决了这个问题。我只是手动移动了它的位置。非常感谢

绞尽脑汁 30 分钟后。我找到了这个。谢谢。