时间戳

首页 > 解决方案 > 从节点模块在 VueJS 中提供 firebaseui.css 的问题

javascript - 从节点模块在 VueJS 中提供 firebaseui.css 的问题

问题描述

所以基本上我已经有这个问题很长时间了，并认为我已经解决了它，但事实并非如此。

我使用本指南开始开发我的网站，它帮助我使用 vue-cli 创建了 PWA。

在向其添加 firebase 身份验证时，我还使用本指南将 firebaseui 添加到我的项目中。

它告诉我将此行添加到我的 index.html

<link type="text/css" rel="stylesheet" href="node_modules/firebaseui/dist/firebaseui.css" />

遗憾的是，这并没有解决，我在我的 chrome 控制台中收到了这个错误消息：

Refused to apply style from 'http://localhost:8080/node_modules/firebaseui/dist/firebaseui.css'
 because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

这是 2 个月前的事，在找到临时解决方案之前，我尝试了很多方法来解决这个问题：

当点击 CSS 资源的链接时，我的浏览器中出现“Cannot GET /node_modules/firebaseui/dist/firebaseui.css”，我想我的本地服务器可能没有提供这个文件。

所以我进入了 build/dev-server.js 文件并添加了这一行：

app.use(express.static('node_modules'))

并将我的 index.html 中的链接更改为：

<link type="text/css" rel="stylesheet" href="/firebaseui/dist/firebaseui.css" />

现在我的网站在运行“npm run dev”时正确加载了所有firebaseui组件，但现在在运行“npm run build”时它仍然没有这样做，因为我的服务器打印了这个：

"GET /firebaseui/dist/firebaseui.css" Error (404): "Not found"

我想这是有道理的，因为我之前只更改了 dev-server.js 中的代码，而不是构建/生产相关文件中的代码，所以我正在写下来

基本上，我要求一种方法来使用 firebaseui.css，而无需更改 dev-server.js 中的内容以使其在生产中工作，或者让某人告诉我必须编辑构建目录中的其他文件以制作这行得通。

在此先感谢您，如果您需要查看我的更多代码，请索取，我会更新这篇文章！

标签： javascriptnode.jsfirebasevue.jsvue-cli

解决方案

天哪，所以我做了更一般的挖掘，发现了这个讨论：

https://github.com/vuejs-templates/webpack/issues/604

通过删除 index.html 中的导入和 dev-server.js 中现在无用的 app.use 行来解决我的问题

现在我简单地添加了

import 'firebaseui/dist/firebaseui.css'

在我的 main.js 中，firebaseui 组件在开发和生产构建中都正确呈现！:)

推荐阅读