Firebase 工具破坏了我的 webapp 依赖项

Posted 2023-02-22

【中文标题】Firebase 工具破坏了我的 webapp 依赖项

【英文标题】：Firebase tools broke my webapp dependencies

【发布时间】：2021-05-19 15:16:12

【问题描述】：

我正在使用 Vue cli 和 webpack/babel 构建一个小型 Web 应用程序。我已经使用“npm run build”工作了一个月，并将在“dist”文件夹中创建的文件放在我的服务器上。现在我想将 Firebase 添加到项目中，但“Firebase deploy”命令不会构建相同的文件。它实际上创建了一个新的占位符 index.html 文件，即使我用以前的 html 替换该文件文件，我也会收到大量错误，因为所有其他组件都不存在（没有 JS 没有 CSS）...

这是我的 Firebase 设置。

这些是我使用“dist”文件夹中的“Npm run build”创建的文件

新的“Firebase 部署”文件 - 现在位于公共文件夹中 - 没有 JS 没有 CSS！

我现在遇到的错误...

现在看来，由 Vue Cli webpack/babel 工作流构建的所有依赖项都已经消失了。有关如何解决此问题而无需从头开始的任何建议？

现在即使我输入 NPM run build 我也会收到错误：

【参考方案1】：

使用 npm run build，您可以独立于 Firebase 构建您的 Vue.js 应用程序。 我不清楚您是否仍将应用程序构建到dist 目录或public 目录。但是，根据您的 Firebase 设置（“您想在公共目录中使用什么”），最后您需要将 npm run build 生成的所有文件（包括 css 和 js）放在 public 目录中.

一个简单的解决方案是将 Firebase 的公共目录更改为 dist：您可以在 firebase.json 文件中执行此操作，然后将 "hosting": "public": "public",... 更改为 "hosting": "public": "dist", ...。

---

最后一点：您对“配置为单页应用程序”的问题回答“否”。通常，对于 Vue.js 应用程序，您应该回答是。

【讨论】：

这与我想要构建的位置无关 - 问题是 Vue CLI 默认构建到“dist”中，而 firebase 从“public”中获取。如果我尝试更改 Vue CLI 的输出目录，我会打开一罐蠕虫和模块导出配置，因为我使用的是 Vue CLI/webpack 和 babel :(

我实际上并没有提到 from 您构建的位置，而是 to :-) 我已经调整了答案以便更清楚。一种简单的解决方案是将 Firebase 的公共目录更改为 dist：您可以在 firebase.json 文件中执行此操作，并将 "hosting": "public": "public",... 更改为 "hosting": "public": "dist", ...。

谢谢雷诺。我试过了。没用...同样，一旦启动 Firebase 工具，它就破坏了我以前的构建方式，所以现在即使键入“npm run build”或服务，我也会遇到一些错误...

我个人将这两个项目（Vue.js 和 Firebase）保存在完全不同的目录中，并按照此答案中的说明进行操作：***.com/questions/48851677/…

现在我只需要回到我在这个项目上安装 firebase 工具之前的位置，这本身就非常困难。我想我会一劳永逸地忘记 Firebase ...... :(